a look at design for the web & all it entails

· view menu ·

WordPress • theme design

WordPress… how I love you
I’m really looking forward to taking you all through the theme design today ~ let’s see how beautiful your blogs will become once you start creating your own themes :)

With so much material out there to support you on your journey into designing your own custom themes for WordPress, we’re going to focus on the practical task today. Rather than spend a lot of time discussing the technical aspects we’ll work on transferring an existing design into a WordPress theme.
Please ask questions in the comments and see the list of links below for useful references and reading ~ you won’t need to look much further than the excellent documentation in the WP codex :)

WP logo
Let’s go through the process of transferring an existing design into a WordPress theme together :)
Download the 2 ZIP files below to get started.

↓ download the sample design
↓ download the vanilla theme

working with WordPress

When developing a new WP site – you should work on your local server, or development server, rather than on a live version. Once your theme is completed – you can then safely setup the live site and know all will work as planned.

As this will take too long in class – we will work with the new online setup instead (similar to working with a dev server). Please do make sure you install a completely new version, and don’t overwrite your existing blog. :)
Perfect time to check on your backups.


  1. download the latest version on wordpress.org
    NOTE: keeping your WordPress installation up-to-date is an important part of maintaining a good and secure website, so remember to update when there are new versions available ;)
  2. upload the folder to your server
    bear in mind what you project is called and give your new folder a suitable name.
  3. edit the wp-config.php file
    you will already have a sample of this file in your folder: “wp-config-sample.php”. Simply edit the file name, open the file to add in your database details. You can find the section below on line 17.

    	/** The name of the database for WordPress */
    	define('DB_NAME', 'database_name_here');
    	/** MySQL database username */
    	define('DB_USER', 'username_here');
    	/** MySQL database password */
    	define('DB_PASSWORD', 'password_here');
    	/** MySQL hostname */
    	define('DB_HOST', 'localhost');
  4. for a more secure setupgenerate your unique salts
    This is a security measure which will secure your passwords and user cookies. You will find the relevant section below the database details.
  5. edit database table prefix
    it is always best to change the default settings of the table prefix to something unique ~ and if you want to use an existing database you will need to do this anyway.

    $table_prefix  = 'wp_';
  6. INSTALL :)
    in your browser, access your new folder and the installation screen will appear, prompting you to add your details.


  1. Akismet first

    always make sure to activate the Akismet plugin first, and add your API key to enable it – it will protect your site from spam.
  2. general settings
    go through the settings to ensure that you have added all required info, such as your site name and tagline and edit the settings to suit, e.g. you might want to change the date format to fit your target group’s preferences.
  3. comment admin
    if your site setup is live – make sure to check on the comment settings. Defaults should be ok but I would recommend to set approval to be required before any comment is published. This will avoid any confusion or upset caused by trolls ;)
    Discussion Settings

create your theme.

Though there are plenty of excellent WordPress themes out there – you should of course create your own, after all you’re a web designer/developer ;)

I would recommend that you have a close look at some of WP themes – it will help yo understand the different approaches and techniques. There is always plenty to learn and dissecting existing themes can teach you a lot.

starting from scratch, the best framework

For any of my WP sites, I always start from scratch with a vanilla theme, containing only minimal markup in addition to the WordPress code. Each project is unique and warrants a fresh approach and a clean start.

  1. prepare/get the vanilla theme
    if you have not done so already: ↓ download my vanilla theme
  2. name your theme
    open the style.css file of your new theme and edit the top comment to reflect your details. The theme’s info will be displayed in your WP admin:

    Theme Name: WPBeauty
    Theme URI: http://eyelearn.org
    Description: light paper with eyelearn colour scheme, typeface: Georgia
    Author: Prisca Schmarsow
    Author URI: http://graphiceyedea.co.uk
    Version: 1.0
  3. install theme
    by uploading it to your server, file path:

    yoursitefolder / wp-content / themes /
  4. activate theme
    once your theme is uploaded – you will see it in the admin menu under Appearance > Themes


transferring your design.

Before you can get stuck in – take a close look at the theme’s template files. They are setup to work in a modular manner, pulling in different elements depending on context and settings.

The index.php file, for example, pulls in the header, footer and sidebar—which in turn pulls in the search form.

Each file serves it own purpose and you should read up on the references in this artile: Anatomy of a Theme

You should also check on your sidebar settings as this might interfere with your new design. For our example here – go to Appearance > Widgets – and get rid of all content apart from the search box. This is the area we will expand upon next week – and it of course will vary from project to project.

  1. compare structure
    open up both your design and your WP theme in your code editor and make yourself aware of any common elements. This can be quite tricky for the first few times – but you’ll soon get used to it ;)
  2. edit all files to reflect your design’s code
    start by working on the index.php file alone and ensure that all page elements are marked up the same. Due to the modular approach – it is likely that you will also need to edit the following files ~ if not more: header.php, footer.php and sidebar.php.
  3. add your assets
    add a copy of your design assets, images and/or javascript files to your theme folder.
  4. the final touch :)
    to finish off – copy and paste your design’s CSS into the style.css file of your theme.
    Keep the very top of the theme CSS (as edited earlier to show your theme’s info) and overwrite all other CSS. Edit the file paths from your design’s to your theme’s folder structure.
    Take, for example, the file path for any background images: instead of
    background: #fdfdfd url(../imgs/noise-bg.png);
    (reflecting a path out of one into another folder) – the file path now needs to be:
    background: #fdfdfd url(imgs/noise-bg.png);
    (reflecting the theme’s folder structure).

useful reading & tutorials

Comments are closed.