course notes 2015/16

WordPress • theme design

Mar 3rd 2016

WordPress… how I love you x

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 logoTASK
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 always work on a development server, and never on the live version. This could be your local server (for example, via XAMPP), or a development set up on your server. 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!!

installation

Please note: this is an overview of the installation steps for future reference. If you followed David’s email instructions – you can skip to step 4.

  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. create new folder in root directory of your server, called “td” (for theme design)
    NOTE: use an original name for this folder. Don’t make it too easy to guess – avoid the defaults like “wordpress” or “wp”.
  3. upload all WP files into your new “td” folder to your server
    NOTE: we are setting up the new site in its own directory to keep our root directory tidy, avoid mistakes with overwriting existing files and for security reasons.
  4. edit the wp-config.php file
    NOTE: 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');

    NOTE: you can use the WP installation screens for adding this information, too. We’ll be doing it manually as you’re just learning PHP and it’s always best to understand where these details are found.

  5. secure the setup: generate your unique salts and add them to config.php
    NOTE: This is a security measure which will secure your passwords and user cookies. You will find the relevant section below the database details.

    define('AUTH_KEY',         'j+u|08,O]KN.2/9@e+fUCBn73u_9;t[T?Z:lc(7,^)Fxs-jxkH`nH-3`7Cm(L?Ej');
    define('SECURE_AUTH_KEY',  'g@QUGHckxP^qr9D)03Q+X^GeV/~Dw2gEz/0?1Z0zFj1x!+i_/wVc%<dG,&9>j.JL');
    define('LOGGED_IN_KEY',    'tF[Oyy:b`Sl0SPFD(a3Rzx7CK*=*Jf>`:LN_XLM]A}i0-~CY(gK+VWbp:{1-VI?^');
    define('NONCE_KEY',        'DjI*-G c{E_/7a#]Ntb,-2]i1p}lS)i<Zt*5q$54U+YZI[YfzJwZAC4u) #9p~@q');
    define('AUTH_SALT',        ';SNZQ$0QW]P7JWfMlcGseFq.jw^`Z~!%V:Vl2adOKoCqHq+nh-5;4uz9Bd2trac|');
    define('SECURE_AUTH_SALT', 'o=B4!is|&r!zE4$!n#6)X1w,#1I48P{q;v9u^I-q:tH)!pHAc9No6n|aET-K|kA)');
    define('LOGGED_IN_SALT',   'TD>1RJXR6%N>TwG3m!5(*3aJ+#IA+%Vo1{tC/6(@[Yu![f&|17l_E87GZSb]3YTK');
    define('NONCE_SALT',       '4MRA3rM(Yz=^#]dT^uO/K;L},g#Y^65C_.cizzJ=ZrHc+~^GW$l<4{mIyDqIVy;#');
  6. edit database table prefix
    NOTE: it is always best to change the default of the table prefix to something unique ~ if you want to use an existing database you will need to do this anyway.

    $table_prefix  = 'td_';
  7. INSTALL :)
    Access your new folder via your browser and the installation screen will appear, prompting you to add your details.

settings

  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 and developer ;)

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

One word of advice which applies to all theming for any CMS: don’t get tempted to use what you do not understand. If you want to design your own truly unique themes, you need to understand how themes work and learn how to use the hooks and functions, to be completely free and not hindered in any way. If you are merely editing and adapting someone else’s code – you could run into issues which you are unable to solve, or you could struggle to realise your own design solution. Start with a very simple and basic theme, stripped of most WP markup. Work with this as foundation and once you understand how to implement your design – you will soon expand upon this and carry on learning with each new site.

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:

    /* WP THEME NOTES
    Theme Name: WPBeauty
    Theme URI: http://eyelearn.org
    Description: light paper with eyelearn colour scheme, typeface: Georgia
    Author: Prisca Schmarsow
    Author URI: http://eyedea.eu
    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:
    background: #fdfdfd url(../imgs/noise-bg.png);
    instead of reflecting a path out of one, and into another folder as used in the original design – the new file path now needs to be:
    background: #fdfdfd url(imgs/noise-bg.png);

useful reading & tutorials

Comments are closed.