Build a simple custom theme – Part 1
Step 1: Set up your project
Make a duplicate of the basic theme and rename the folder to ProjectA (or whatever name you want).
In the ProjectA folder, open up the style.css and edit the first few lines.
/*
Theme Name: Bluelime Media Basic Starter theme — as the line suggests, this is the theme name. Give your project a name.
Theme URI: http://www.bluelimemedia.com — provide a link to where the project will reside
Description: Basic — add a description
Version: 1.0 — just leave as is
License: GNU General Public License — you won’t be distributing this theme, so feel free to delete this line and the next one.
License URI: GPL.txt
Author: Christine Rondeau — insert your name here
Author URI: http://www.bluelimemedia.com — insert your url
*/
Save the file.
Next let’s replace the screenshot in our ProjectA folder with the new one. When designing new projects, you simply need to make a 300px x 225px image of your design and save it as screenshot.png. I’ve provided you with one (it’s in the images folder of the final theme) so just go ahead and replace the Basic one with this new one.
Upload the folder in your themes directory, login to your admin and activate it.
If this is a fresh WordPress installation, and I recommend that it is, you will see a site with the Hello World on the home page and a sample page. The website should have the same look and feel as the Basic theme.
To properly set up your site, let’s create a few pages and just add dummy text for now.
Go ahead and create the following pages:
- Home,
- About Us,
- Contact,
- Blog
- and rename your Sample page to Portfolio.
Next let’s add a couple of pages called Design and Logos and assign the page Portfolio as their parent.
Go ahead and create at least 3 blog posts and a few categories.
In the Settings > Reading section, select “Front page displays — static page” and then choose Home for your home page and Blog to display your posts.
Next also in the Settings > Reading section set the number of post to display to 2. This will allow you to see the next page link at the bottom of the page and style it to match the rest of your design.
Via your widgets, drag the categories and recent articles widgets.