Under construction

Under Construction!

Leo Kim

Leo@leokim.co.nz


Aspiring Web Developer

< Back

Creating a Custom WordPress Theme

May 28, 2017

This will be a start to a series of posts that will cover theme creation in WordPress.
I’ll be writing about what I’ve learnt on creating custom themes and hopefully it will be of use to you.

I will assume that you have already installed WordPress, and your default theme is set to twenty-seventeen, you can confirm this by going to Appearance->Themes.

Great, next step is to locate our themes directory in our web server, in my case it was – public_html -> wp_content -> themes. Once in the themes directory, you will see a few theme folders including twenty-seventeen; the current active theme. Within the themes directory, create a new directory, I will name mine myCustomTheme.

Sweet, go into your theme directory and we are now going to create two files called index.php and style.css. We only need these two files for our theme to be functioning.

Both index.php and style.css need to be in your main theme directory, you should not put these in sub-directories.

Open up your index.php file and copy and paste the following:

<?php
echo "This is my custom theme";
?>

In style.css :

/*
Theme Name: myCustomTheme
Author: Leo Kim
Description: This is a custom theme 
Version: 1.0
*/

The comment section above is used to determine what is going to be displayed on your WordPress dashboard theme selection page. After the comment section, you can have ordinary css to style your theme. Remember to save both files 🙂

To check that our theme is listed, go to your WordPress dashboard -> Appearance -> Themes.

Hooray, now we can activate our theme by clicking on the theme and selecting ‘activate’

To check that our theme is active, go to your website main URL. You should be seeing a text appear on the top left corner saying “This is my custom theme!”.

Hooray, although the theme is static and very boring at this stage, we have just completed setting up a custom theme… Next time we will be looking at other template files, adding some styling, and also getting some content into our theme.