WordPress is without a doubt the most popular content management system (CMS) in the world right now. A key feature of this success is its open-source character, ease of use, and huge support community that constantly produces new add-ons, updates, and new features to meet any needs.
Obviously, such a popular platform has some drawbacks such as security issues, limited user management capabilities, etc. (To read more on this topic see our article “Which is the best CMS?“). However, as mentioned above, WordPress is supported by thousands of users.
Chances are, that there is no configuration in its operation left unsolved (either through an addon or through a free or paid theme). Obviously, by following this tactic we will end up with our website being visually reminiscent of dozens or hundreds of others.
So, what can be done if we want the design of our website to have our own touch?
The theme I have chosen for my website does not support the changes I have in mind.
In this case, we have to turn to the solution of creating a Child theme. Let’s take a look at the advantages:
- Greater control over the design of our page
- It is the best way to intervene in the code of the theme we have chosen without excluding updates
- Ability to add extra functionality to our website
- It is a great way to start learning about theme development for those who want to enter the field
It should be noted that basic PHP and CSS knowledge is required to proceed to this step. Also, in case you do not operate in a local environment, access via FTP to your server is necessary.
To set an example, we will create a child theme for the Twenty Seventeen theme that is pre-installed in WordPress. The first thing we have to do is go to the root folder of our website and then to wp-content/themes/ (If our website is already live via FTP or if we work locally, we just go to the appropriate folder).
There is a folder for each theme. What we need to do is create a new one called “twentyseventeen-child”. Two files are required for the theme to be considered functional: functions.php and style.css. Create these files and leave them blank for the moment.
At this point, we have to return to the parent theme and obtain some information from the corresponding style.css file. Let’s take a look at its content with a word processor:
/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
It is noticeable that the first 15 lines of the file follow a specific format. They provide useful information such as the name of the theme, the creator, its features, its version, etc. Something similar should be done for the style.css of the Child Theme. To create the child theme 2 entries are required: Template and Theme Name. We can also enter more information such as the name of the author, the address of the theme, the version, etc.
/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/
@import url('../twentyseventeen/style.css');
As shown above we declare the name of the theme and the template we want it to inherit (at this point the name of the folder of the parent theme is defined). Also with the next command, we enter all the styles defined in the parent theme. So by going back to the management, then to where the themes are and by updating the page we will see that the new theme is now available. The only thing left is to activate it.
See more about creating a Child Theme in WordPress on the official WordPress website: Child Themes.
