Category: Development


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

/* 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-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

/* 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


//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:


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

To see all the set available visit the WordPress Developer Resources

How to make a template message for Git commits

At work finally I am using git properly(Or I think), I mean, now I understand how to use branches anytime that a new feature shows up or a bug has to be solved, and how I mentioned at Twitter I know that we are in 2017 and I should been using git since a lot time ago but since I’ve take new jobs I really have the opportunity to use git at my new jobs.

Every time I notice more and more benefits about use git, for example, I just notice that you can create a message template for any time that you make a commit. Thus this feature allows you to keep a standard for your team of codeers when they need to write a commit message, like have s title, description and issue address by.

This post shows how to configure your repo to create a commit message template so you can have a standard for your commit messages.

In the root folder of your project create a .gitmessage file and add the next content:

Some awesome title


* ...

This change addresses the need by:

* ...

Now using the console in the root of your project folder type:

git config commit.template .gitmessage

Yaaaay! Now you are ready to make c00l messages anytime you have to make a commit.

Tip: You can set a template message globally just typing –globally before commit.template

git config --global commit.template .gitmessage

To unset the global template commit type:

git config --global --unset-all commit.template