Thursday, March 28, 2024

The Building Process of WordPress Themes

The title for this article might be a bit of a misnomer. While it’s entirely possible to build WordPress themes from scratch, it can be a really time consuming process. Fortunately, there are other ways of getting the job done. One option is to make use of theme building software, such as Headway Themes or Moboom or you can take an existing theme, create a child theme of that and modify it to match the client requirements.

To guide me through the process, I spoke with Shawn DeWolfe, a web developer in Victoria, B.C., Canada. Some time ago, Shawn was hired to build a customized theme for a client.

The client bought the RAW theme from The Theme Foundry, which has the closest look and feel to the design that they wanted. The combination of layout choices and the premium add-ons from Theme Foundry made the theme into a powerful starting point for the modifications that needed to follow.

The RAW theme also ships with Foundry, which gives you control over design elements such as the header, fonts, logos, colors, sliders, etc. Unfortunately, the RAW wasn’t an exact match and they needed Shawn to customize the theme.

There are two approaches he could have used. One option would be to customize the existing RAW theme to give the client the look and feel they desired but there was one problem with that. If the client ever updated the theme all of the changes would be lost.

The solution was to create a child theme, a new theme that preserved the original theme but would add in the customizations the client wanted. With the child theme the original theme could be updated with new versions and the child theme would still retain the customizations.

The first step was to create a directory within the document tree as in the screen shot above. Shawn named the directory “Walmsley.” This is where all the information for the child theme is stored.

The next step was to create the CSS file with all of the changes that the customer required. Here’s a screen shot of the code necessary for the top of the CSS document.

After the CSS document was complete, other changes were necessary, to various PHP files.

Here’s the WordPress Appearance section showing the RAW theme and the child theme.

When the child theme is in place, most of the aspects of the parent theme can be re-rigged by recreating the parent PHP scripts in the child theme and then making the changes. When the child theme is active, the local PHP files (those in the child theme) will be used in favor of the parent theme files.

Through this system, a developer can create an alternative header.php, footer.php and/or replace other child replacement pages with different behaviors. For example, there needed to be three distinct menus displayed in the design. In this theme, the menu sat in the header, the header.php file. To add those additional menus, there needed to be a change in the header.php and functions.php files.

The header…

<nav id=”primary-wnav” class=”nonmobile”>

<?php wp_nav_menu( array( ‘container’ => ‘div’, ‘theme_location’ => ‘primary’, ‘depth’ => 2 ) ); ?>

</nav>

…had this element added beneath:

<nav id=”counselling-wnav” class=”nonmobile”>

<h5>Clients</h5>

<?php wp_nav_menu( array( ‘container’ => ‘div’, ‘theme_location’ => ‘counselling’, ‘depth’ => 2 ) ); ?>

</nav>

<nav id=”corporate-wnav” class=”nonmobile”>

<h5>Corporate</h5>

<?php wp_nav_menu( array( ‘container’ => ‘div’, ‘theme_location’ => ‘corporate’, ‘depth’ => 2 ) ); ?>

</nav>

<nav id=”wellness-wnav” class=”nonmobile”>

<h5>Aid</h5>

<?php wp_nav_menu( array( ‘container’ => ‘div’, ‘theme_location’ => ‘wellness’, ‘depth’ => 2 ) ); ?>

</nav>

That provided three additional menus. To address those, Shawn created a functions.php in his child theme. The functions.php script is additive. The parent theme functions are present as will be the child theme functions, so beware of naming conventions so that the function names do not collapse.

This call to “register_nav_menus” will make the intended regions available for use by the child theme.

register_nav_menus( array(

‘primary’ => __( ‘Primary Menu’, ‘walmsley’),

‘counselling’ => __( ‘Counselling Menu’, ‘walmsley’ ),

‘corporate’ => __( ‘Corporate Menu’, ‘walmsley’ ),

‘wellness’ => __( ‘Wellness Menu’, ‘walmsley’ ),

‘members’ => __( ‘Members Only Menu’, ‘walmsley’ ),

) );

Child themes rely on the parent theme for much of their functionality. Developers can add even more (PHP code) to build more elaborate themes with greater options and flexibility

 

Conclusion

If you’ve been looking for a way to build WordPress themes, what you see here is one way to do so without starting from scratch. If you need a developer to take care of that for you, I recommend you contact Shawn Dewolfe directly, either on his website or by email.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured