Customising WordPress

The first thing to do is choose a theme that best suits your needs. (For example, at the time of authoring this article, the webTiger blog was using the twentyfourteen theme but that may have changed!) Once you’ve got your theme you’ll probably need to alter the font styles, colour scheme, etc. To do this we’ll use the ‘child theme’.

Navigate to the themes folder of your WordPress installation. You’ll need to do this via FTP or using a web-based file manager (if your hosting provider offers one.) Navigate to the following folder:

blog-root}/wp-content/themesCode language: plaintext (plaintext)

Create a new folder with a meaningful name for your child theme. Within that folder, create a new style.css file. I’ve found the easiest way to override styles is by copying the entire CSS file from the parent theme and then cutting out anything I don’t need. The parent theme’s style.css file in our example case (using the twentyfourteen parent theme) will be in the following folder location:

{blog-root}/wp-content/themes/twentyfourteenCode language: plaintext (plaintext)

So, copy your parent theme CSS into your new child theme CSS file. The header region of a child theme CSS file has specific requirements. It must reference the parent theme being used (and that parent theme obviously needs to be installed on your WordPress instance for it all to work properly.) Delete the existing header you just pasted in. Replace it with a child theme header similar to the one described below…

/*
Theme Name: webTiger Child Theme
Description: Child theme providing overrides for the twentyfourteen theme
Author: webTiger.uk
Author URI: http://www.webtier.uk/
Template: twentyfourteen
Version: 0.1.0
*/Code language: plaintext (plaintext)

The key thing to note here is the template name (the Template twentyfourteen line.) This is what tells WordPress which parent theme to use as a basis for styling.

Now all you need to do is modify or delete the styles as necessary. (Modify any that you need to change (colour, font, margins, borders, etc.) and delete any that are fine as they are – since they’ll be inherited from the parent.)

For example, we may want to override the fixed width limit in the 2014 theme…

.site {
    max-width: 100%;
}

.site-header {
    max-width: 100%;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    max-width: 100%;
}

You may also want to update this.
.hentry {
    max-width: 1600px;
}Code language: CSS (css)

With these few minor tweaks, we’ve made our WordPress blog fill the browser window width.

As you can see, it’s very easy to tweak the layout using this technique.

Now you’ve done the hard work, update your site to use you new child theme and see how things have changed! Once you’ve selected your new theme, you can make further customisations via the administrator’s dashboard like you normally would (adding a site identity icon, brand header image, etc.)