Jul
18
2012

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

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

Version: 1.0

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

and now paste it into the header.php. This will now be the header of your wordpress theme.

 

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.

<?php bloginfo(‘name’);?>

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

<?php bloginfo(‘stylesheet_URL’);?>.

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.

<?php bloginfo(‘rss2_url’);?>”/>

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.

<ul id=”nav”>

              <?php bloginfo(‘url’);?>”>Home

 

               <?php wp_list_pages(‘depth=1&title_li=’);?>

 </ul>

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.

<img src=”/images/ad.png “alt=”"/>

 

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.

 

<h3>Categories</h3>

 <ul>

 <?php wp_list_cats(‘sort_column=menu_order&depth=1&title_li&show_count=1′);?>

</ul>

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.

<h3>Blogroll</h3>

<ul>

<?php wp_list_bookmarks(‘title_li=&categorize=0′);?>

</ul>

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:

<?php_get_header();?>

Then at the bottom of the document enter.

<?php_get_sidebar();?>

<?php_get_footer();?>

 

Step 14: The loop

This is probably the most important part of the wordpress theme, everything inside the loop will echo for each post.

<?php while(have_posts()):the_post();?>

<div class=”post”>

….

</div>

<?php endwhile;?>

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.

<div class=”info”>

<ul>

 

<li><?php the_time(‘FdS,Y’);?></li>

<li><?php the_category(‘,’);?></li>

<li><em><?php the_author();?></em></li>

</ul>

</div>

 

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.

<div class=”text”>

<?php the_content(“);?>

<span class=”more”<em><a href=”<?php the_permalink();?>’>Continue reading</a></e.</span>

</div>

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 header.php

<?php wp_head();?>

</head>

<body>

in the footer.php

<?php wp_footer();?>

</body>

</html>

 

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!

About the Author:

I am a graphic and web designer that loves wandering the globe and eating noodles!

  • Steve

    As a Newbie, I am always searching online for articles that can aid me. Thank you

    • Robin Powell

      Glad it helped :)

  • Valentin

    Hi Rob, I just wanted to send you a virtual pat on the back for putting together such a informative and helpful article. I hope you will be publishing more articles like this soon. Again thanks for sharing your knowledge.

    • Robin Powell

      Thanks Val! Top man!

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 5 other subscribers

Special Recent Posts

Protected: anyone for tea?

anyone for tea?

July 4th, 2013

[...]

Tree houses: daily inspiration

Tree houses: daily inspiration

October 1st, 2012

Tree Houses The reason I wanted to use Tree house[...]

Ken Barthelmey, Amazing artists interview

Ken Barthelmey, Amazing artists interview

September 30th, 2012

Ken Barthelmey interview Today Creative-Phlare ha[...]

Street art, Daily inspiration

Street art, Daily inspiration

September 21st, 2012

Street art Street art is a very versatile art for[...]

CG art, todays daily inspiration

CG art, todays daily inspiration

September 19th, 2012

CG art, you're in for a treat!! Browsing the web [...]