Build wordpress themes from scratch.
If you never build wordpress themes from scratch it can seem like a scary experience especially for some one who has never done it before!
This tutorial will take you step by step and show you how you can do it easily and without too much hassle. Here is what you will create. You will take your html site and show you how to build wordpress themes from scratch
WordPress has risen to the top of the list in the webs favourite publishing platform thanks to its simplicity, scalability and usability. There are thousands of sites out there offering lovely wordpress themes that will give users the look and feel they want instantly. But while they offer this a designer must be able to recreate his/her design pixel perfectly and without being able to build wordpress themes from scratch your wordpress site will never be truly your own original.
Plenty of themes are a perfect starting base but with a little extra effort you can take it to the next level!
WordPress is essentially a collection of php tags and style sheets that can be modified to create a personalised site. Ok, onto the tutorial!
Step 1: Download and set up!
To get started, first download the latest version of wordpress from the wordpress site and install it onto your server. A lot of hosts have a one click install option but if yours doesn’t you’ll have to install it manually.
Step 2: Build wordpress themes from scratch
In your file browser, go to the wp-content/themes folder. Every time you want to put a new theme up you will put it in here.
Create a brand new folder for your theme and give it a name – I called mine ‘Build wordpress themes from scratch’ and create four blank files inside – index.php, header.php, sidebar.php and footer.php.
Then copy your images folder and style sheets from your html website into the same folder. Then open your style sheet in your code editor and add the information bellow at the top of the style sheet adding your own information as you go. These details will show wordpress what theme it is and who is the creator.
Theme Name: Build wordpress themes from scratch
Theme URL:http://Build wordpress themes from scratch.com
Description: Build wordpress themes from scratch designed by me
Author: Your Name
Author URL: http://yourwebsite/Build wordpress themes from scratch.com
Step 3: Creating the header
Open the index.html in your code editor, copy the code from the top the document down to the end of the #header
Now for some dynamic content!.
The first dynamic tag you’ll use is to generate the page title. Find the title tags near the top of the header.php and type in the following code inside the tags.
Step 4: Style sheet URL
The URL to the sites style sheet in the header must be a full URL and not just simply the file name, otherwise it will not work. A few lines down from the title, you’ll need to replace style.css with
This tag will generate the full URL to the themes style sheet.
Step 5: RSS URL
By default, an RSS feed is generated for your blog. To make that feed publicly visible you’ll need to add the code in your header. php. A good place to put it is under the style sheet tag.
Step 6: Site title and URL
Inside the <H1 id =”logo”>, replace the ‘#’ with <?php bloginfo(‘url’);?> and the ‘blackNgrey’ with <?php bloginfo(‘name’);?>
The first tag will generate the URL of the site, and the second tag will name of the site provided in the general wordpress settings. remember that URL tag, you’re going to be using it quite often!
Step 7: Navigation
Moving on to the unordered list, add the blog URL tag to the link for the home, just like in the last step. To dynamically generate a list of your sites page’s after that, replace the rest of the links with<?php wp_list_pages(‘depth=1&title_li=’);?> Remember this tag! You will use it when ever you want to display a list of pages on your site.
Step 8: Creating the sidebar
Lets move on to the sidebar. In your HTML source file, locate the sidebar div create a
<form methid=”get” id=”searchform” action=”/”>
Step 9: Activate the search
WordPress has a built-in search feature. It’s really simple to activate, all you have to do is insert the blog URL tag in to the form’s “action value”, this is the same tag we used in the header twice already.
Step 10: Ad placeholder images
In the next area, the advertisement area, you need to link to the four place holder images. However, you can’t just link right to the images folder – just like the style sheet you have to use the whole URL. Before the images insert this tag.
<?php bloginfo(‘template_directory’);?>. This echoes the full |URL to your theme folder. This is another tag you’ll use pretty often if you’re linking to images in your images folder in your theme file.
Step 11: Categories
There is a list of post categories you want to make dynamic. This is another common tag. <?php wp_list_categories(‘title_li=’);?>. Insert this tag inside the unordered list in place of all existing items.
Step 12: Blogroll
Finally, insert a list of your favourite links. these links can be n]managed in the wordpress admin under ‘links’. To display the list in your side
bar, use <?php wp_list_bookmarks(‘title_li=&categorize=0′);?>, which will display your list in alphabetical order.
So, now we have the mark up split into separate PHP files accordingly, we can move on to the next template file of the theme.
Step 13: Creating the home page
open your index.php file and copy and paste all the content from your #wrapper div in to the index.php. You now want to attach your header.php, sidebar.php and footer.php. This is really easy! Enter the following code into the index.php.
First line of index.php:
Then at the bottom of the document enter.
Step 14: The loop
This is probably the most important part of the wordpress theme, everything inside the loop will echo for each post.
This is place after the tag.
Step 15: The loop content
Inside your H2 heading insert the following
<h2><a herf=”<?php the_permalink();?>”><?php the_title():?></a></h2>
Step 16: The loop content part 2
Now we need to add a few extra tags to the loop. For the meta data we need the date, author and category! so add the following.
Step 17: The loop content part 3
replace the dummy content text with <?php the_content();?>
This tag will get the corresponding content for each post. Finally we want the read more link.
<span class=”more”<em><a href=”<?php the_permalink();?>’>Continue reading</a></e.</span>
Step 18:Archives, search and single
Create three new files called archive.php, search.php and single.php. Copy and paste all the code from index php into each of those files.
Step 19:Regular pages
Create a new file called page.php and copy and paste the index.php code in to it. Some of the styling is different on this page so we want to add a page class div to <div class=”post> so now we want to make that div <div class=”post page>.
Also, since we don’t want the meta data on this page we’re going to remove the <div class=”info”> and it’s contents.
Step 20:The footer
Creating the footer for the theme is very simple. From your HTML source file copy and paster the HTML body closing tag and the full footer Div contents into your footer.php and that’s it done! Easy.
Step 21: Triggers
There are two hooks you need to have in your theme so other plug-ins can interact with it. One tag goes inside the and the other goes just before the body closes in the footer.php.
in the footer.php
Step 22: Activate your theme
In theory, Now you know how to build wordpress themes from scratch! Now it’s time to put you new theme to the test. Log into your wordpress area, go to the themes section and activate your theme! Whoop whoop… you have just learned how to build wordpress themes from scratch!
So now you know how to build wordpress themes from scratch you can go off and start creating some amazing blogs and sites. Being able to build wordpress themes from scratch gives you so much more flexibility when it comes to making your own or a clients website! you’ll never use someone elses theme again! Go on… build wordpress themes from scratch! Enjoy.
I hoped you found this tutorial useful. keep coming back and share, comment and big up creative-phlare to all your buddies!