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 container_wordpress_1 docker-php-ext-install pdo_mysql

Restart Apache in WordPress container

docker exec -it container_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;
}

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 🤦‍♂️

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

Bubble is here!

 

Until not long ago when creating themes for WordPress I made the serious mistake of trying to create everything from scratch, and from scratch I mean from take care of using correct semantic tags to having a file structure as clean as possible avoiding structure duplication in files.

I also have to add that the structure of my functions.php files were very poor, which led me to lose the benefits of using a CMS like WordPress, for example the functions wp_enqueue_style and wp_enqueue_script to name a few. All this happened to me I think due to my little interest (or ignorance) about the projects or repositories with existing boilerplates in large communities like Github.

Recently I have had the opportunity to continue projects started by other people or to maintain other themes for WordPress, there I have known projects like _s or FoundationPress which already offer a good enough base or that are a good starting point to consider when creating themes for WordPress , so I decided to create Bubble,

Bubble is a personal project, a fork of _s, by default the structure of Bubble is integrated with Bootstrap, so you will notice that the menu for example has a walker to show the menu with the structure of WordPress. The layout is also structured with the Bootstrap classes.

Bubble on Github

 

Customize styles of Contact Form 7

In my last project I had the need of customize the messages success and fail of Contact Form 7 and after using this usel post of Isabel Castillo (Style The Response Messages For Contact Form 7) I could make it it.
Now, I want to share some changes that I made to the Isabel’s solution like a class for the email send error and another one for the inputs hints.

/**
 * @author: Wilhelm
 * WP iconset https://developer.wordpress.org/resource/dashicons/#analytics
 */

/* Input hint */
.wpcf7-form .wpcf7-not-valid-tip {
  padding-left: 2rem;
}

/* Error */
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form .wpcf7-response-output.wpcf7-spam-blocked,
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng {
    color: #d8000c;
    background-color: #ffbaba;
    border: 0;
    padding: 10px;
}

/* Success */
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;
    background-color: #dff2bf;
    border: 0;
    padding: 10px;
}

/* icons properties */
div.wpcf7-mail-sent-ok:before,
div.wpcf7-validation-errors:before {
    font: 26px/30px dashicons;
    margin-right: 16px;
    vertical-align: middle;
}

/* WP Dashicon check icon for success */
div.wpcf7-mail-sent-ok:before {
    content: '\f147';
}

/* WP Dashicon no icon for errors */
div.wpcf7-validation-errors:before {
    content: '\f158';
}

To load the Dashicons of WordPress icons in our theme I don’t use the Isabel’s solution of load the icons using the function wp_enqueue_style( ‘dashicons’ ), instead I load the Dashicons like I explained in my previous post How to use dashicons in your wordpress theme

<?php 
/* function.php */
//Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );

How to use dashicons in your wordpress theme

Dashicons are the official icon font for WordPress and that you can use it in your theme, if you don’twant to use fontawesome or another icon set this is a good alternative.

To use it on you theme just add Dashicons on your functions.php file

function.php

//Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

You can refer the icons in your CSS like:

style.css

.my-class {
content: "\f147";
}

To see all the set available visit the WordPress Developer Resources