Install pdo_mysql library using WordPress image in Docker

If you work with the image of Worpress for Docker and need to do something “out of the box” like connecting to the database that uses the WordPress image from a script that is not part of the WordPress theme it will not be possible because you need to install the MySQL pdo library in WordPress container.

To solve this we only need only two commands:

  • A command to install the pdo library that we need
  • A command to restart the WordPress container to load the new installed library

Install pdo library in WordPress container:

docker exec -it sigalavaca_wordpress_1 docker-php-ext-install pdo_mysql

Restart Apache in WordPress container

docker exec -it containername_wordpress_1 /etc/init.d/apache2 reload

Ready, your custom script can now connect to the same database used by the WordPress container.

Style WordPress galleries easily with CSS Grid

This is a simple example of how we can format galleries inserted into WordPress posts using CSS Grid in the style sheet.

The CSS class that represents the gallery within the post is .gallery and each gallery format ranges from the .gallery-columns-1 class that represents a column to the .gallery-columns-9 class that represents a nine-column gallery.

.gallery.gallery-columns-1 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-2 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-3 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-4 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-5 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-6 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-7 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-8 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.gallery.gallery-columns-9 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

Development Trello Board Template

Trying to improve my work methodology lately and I come using Trello to track my programming projects, the good thing about using these tools is that if you are in a place that lacks order or there is no one to organize the current projects is that it gives you a complete vision in the follow-up of all the projects, well, at least those that are at your position.

Trello has very good examples on his page to be inspired when creating Boards and taking some ideas from them I share a Board that I created for the follow-up of a programming project.

View: Development Template Board

WTF?!? Cookies are blocked due to unexpected output

One of the worst messages you can see in WordPress and especially in production as a developer is: Cookies are blocked due to unexpected output.

This error does not tell you anything, it can be a problem with a plugin (lucky you if you have few of them) or a file in the active theme that is saved in some type of encoding other than UTF-8.

When this error appeared to me recently, the solution in my case was to check the encoding of all the modified files since the date the message appeared in the WP Admin, in each file check the type of encoding and all those that were “UTF-8 BOM ” I saved them again in” UTF-8 “format.

There are many cases of why this error happens, in my case I knew that it was a problem was the current theme because at the time that I renamed the active theme name in the server the WP Admin was gone.

Recommendations:

  • Use an editor that allows you to see the type of encoding of a file
  • The php files save them in UTF-8 encoding
  • Never, but never trust Windows editors 🤦‍♂️

Weekly Pen #1

This is the first post of many pens(personal challenge) with simple code snippets with useful(maybe) or interesting ideas examples. Basically the idea to publish a pen weekly.

All the pens will be published on my codepen profile if you will like to fork it.

Animated Card

See the Pen CSS card animation by Wilhelm (@wilcho) on CodePen.

Simple React Button

See the Pen React button by Wilhelm (@wilcho) on CodePen.

Animated bullets

See the Pen Animated bullets by Wilhelm (@wilcho) on CodePen.