Create a custom WordPress theme

The best way to customise your WordPress site is to create a custom child theme based on one of the standard built-in themes.

In this example I will call the new theme zjl_2014 and it will be based on the twentyfourteen built-in theme.

sudo -s
cd /opt/www/html/blog.laczik.org/wp-content/themes/
mkdir zjl_2014
cd zjl_2014/
mkdir page-templates
nano style.css

Add a header describing the new theme, in particular the ‘Template’ line specifying that this a child theme of twentyfourteen. Initially, we just override the margin settings for the site. Further customisations can be added to the style.css file later.

/*
Theme Name: ZJL_2014
Theme URI: http://blog.laczik.org/wp-content/themes/zjl_2014/
Description: Child theme, based on Twenty Fourteen
Author: ZJ Laczik
Author URI: http://www.laczik.org/
Template: twentyfourteen
Version: 1.0.0
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated
Text Domain: zjl_2014
*/

/* centre horizontally */ 
.site {
margin: 0 auto;
}

Next, create and edit functions.php and add statements to load the parent style of our new theme. Later we can further modify functions.php to override built-in functions and to add new ones.

nano functions.php
<?php
// load parent theme's style.css
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
} 
?>

Make sure the new directories and files have the correct ownership

cd ..
chown -R apache:apache zjl_2014

Log in to the site as admin and go to ‘Appearance > Themes’ and activate the new theme that should be listed together with the built-in themes. The two files we created for our new theme, style.css and functions.php, can now also be modified by going to ‘Appearance > Editor’; just make sure that the correct theme is selected, otherwise you may end up modifying files belonging to one of the built-in themes.

Also see
blog.spoongraphics.co.uk: How to build a custom WordPress theme from scratch
codex: Theme development
siteground tutorials: Create theme
smashingmagazine: Create and custumise child schemes
codex: Child themes

Leave a Reply

Your email address will not be published. Required fields are marked *