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

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

 

Webpack 4 Boilerplate configuration with Babel, Bootstrap 4, Sass and Webpack Server

Yes, I know, there are a lot of repos with Webpack configuration to start with our projects, but beyond of that, this a boilerplate made from scratch following mainly this great post of Margarita Obraztsova where she explains how to configure Webpack 4 and that helps to have a major understanding of how packages and Webpack works.

The idea of create this repo is to learn how the configure all this technologies to develop further projects using the latest technologies and have a better understanding of how works all together, and not just make copy/pate of Stack Overflow.

I hope that this help somebody like the Margarita’s post did with me 🙂

Repository available in:

Webpack Boilerplate

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

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

Why:

* ...

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

References: