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.

Dockerpress

For some time I have wanted to leave MAMP to work on WordPress projects and use Docker, luckily this week I came across a tweet from Fran Piaggio where he shares a repository of Jared Palmer with a basic configuration of Docker to work on WordPress in 2019. In addition to the WordPress configuration Jared added a Webpack what is a very useful.

The repository of Jared encouraged me to take up my idea of having a WordPress configuration for my projects, so with that base I can be guided to create my own configuration that I call Dockerpress.

Unlike the Jared repository, it does not have Webpack configuration, since I use another configuration that you can find in Webpack Boilerplate repository, what I have added to it is a Mailhog as a service to catch test emails and an file for enviroment values.

I hope it is useful or a basis for your own configuration.

Dockerpress on Github

How to configure a SSH connection on cPanel

First configure the SSH access on Server

  1. In the home page of cPanel go to “SSH Access”
  2. Click “Manage SSH keys”
  3. Click “Generate Key”
  4. Set a key name and set the key password(this is the passphrase to connect to the server). Leave the others fields with the data by default
  5. Click “Generate Key”
  6. On “Manage SSH Keys” select “Manage” in the new key generated
  7. Click “Authorize”
  8. On “Manage SSH Keys” select “View/Download” on “Private Keys”
  9. Click “Download Key” and save the file as “keyname.key”
  10. Move the downloaded key to a folder where you store your keys, example: ~/.ssh
  11. Change the permission of the copied file to 600 with the chmod command
  12. In the home page of cPanel go to “Manage SSH”
  13. Enable the option “Enable SSH access”

Let’s configure the SSH connection on the machine. NOTE: This example apply for Mac

Create a file called “config” on path ~/.ssh (you can pick whatever you want)

Host hostname
  HostName IP Address/Hostname
  User username
  Port 9999
  IdentityFile ~/.ssh/name.key

Now to connect to the server on console write:

ssh hostname

Then the console will ask you the passphrase that was set in the fourth step when we create the key on the beginning of the post