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 :)
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.
working with WordPress
When developing a new WP site - you should work on your local server, or development server, rather than online. Once your site is complete - you can then safely setup the live version and know it will work as planned.
As we cannot easily do this in class - we will work live online instead. Please work on this version till next week when we will expand upon our new site :)❧
- download the latest version on wordpress.org
NOTE: keeping your WordPress installation is an important part of maintaining a good and secure website, so remember to update when there are new versions available ;)
- upload the folder to your server
bear in mind what you project is called and give your new folder a suitable name.
- 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');
- for a more secure setup - generate 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.
- 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_';
- INSTALL :)
in your browser, access your new folder and the installation screen will appear, prompting you to add your details.
- 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.
- 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.
- 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 ;)
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.
- prepare/get the vanilla theme
if you have not done so already: ↓ download my vanilla theme
- name your theme
style.cssfile 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://graphiceyedea.co.uk Version: 1.0 ---------------------------------------*/
- install theme
by uploading it to your server, file path:
yoursitefolder / wp-content / themes /
- 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.
- 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 ;)
- edit all files to reflect your design's code
start by working on the
index.phpfile 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:
- add your assets
- the final touch :)
to finish off - copy and paste your design's CSS into the
style.cssfile 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
- WordPress Lessons (overview), WordPress
- Stepping Into Templates, WordPress
- Theme Development, WordPress
- WordPress tutorials, code snippets and more, CSS-Tricks
- Building Custom WordPress Theme, webdesigner wall
- New WP Video Series, Themeforest
- 38 Excellent WordPress tutorials for beginners & pro’s, WP View