Building Custom WordPress Theme
16/02/10 16:08
A wall of design ideas, web trends, and tutorials.
NOV
17
WordPress
Building Custom WordPress Theme This is the Chapter II of the Complete WordPress Theme Guide series. This chapter will show you how to build a custom WordPress theme. Although the Codex site provides very good documentations on how to create a theme, but I find it too complicated for a beginner. In this tutorial, I will explain the basics of how WordPress theme works and show you how to convert a static HTML template into a theme. No PHP skill is required, but you need Photoshop and CSS skills to create your own design.
1. The Blog Frontend Before you start, let’s take a look at the WordPress default theme and see how it is structured. Take note of the elements (header, post title, search form, navigation, footer, etc.).
Default Frontpage (index.php)
Default Single (single.php)
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 1 di 10
Building Custom WordPress Theme
16/02/10 16:08
2. Photoshop Mockups Based on the information gathered from the default theme, design a Photoshop mockup of your blog. Here I’m using GlossyBlue, one of my free WordPress themes, as an example. Download the demo.zip to see the Photoshop file.
3. HTML + CSS After the PSD design is done, create a static HTML+CSS template of each page. You can use my GlossyBlue HTML files in the demo.zip to follow this tutorial. Extract the zip and take a look at the index.html,
single.html, and page.html . Later in the tutorial, I will use these HTML files and convert them into a theme.
Why Create a Static HTML File First? Mainly because it will make the development process a lot easier. I usually create a HTML file for every template that I need, test it across all browsers, validate both HTML and CSS markups, then all I have to do is cut & paste the WordPress code. By doing so, I don’t have to worry about HTML or CSS bugs during my theme making process.
4. How WordPress Theme Works If you go the default theme folder (wp-content/themes/default ), you should see many PHP files (called template file) and one style.css file. When you are viewing the front page, WordPress actually uses several template files to generate the page (index.php << header.php, sidebar.php, and footer.php).
For more details, check out Site Architecture and Template Hierarchy at Codex.
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 2 di 10
Building Custom WordPress Theme
16/02/10 16:08
5. Duplicate The Template Files Copy the GlossyBlue HTML folder into the wp-content/themes folder. Then, go to the default theme folder, copy the comments.php and searchform.php file to the glossyblue folder.
6. Style.css Go to the WordPress default theme folder, open the style.css file. Copy the commented code at the top and paste it to the GlossyBlue style.css file. Change the theme name and the author information as you desire.
7. Splitting The Files Now you need to understand where to split the file into several files: header.php, sidebar.php, and
footer.php. The image below shows a simplified version of my index file and how the markups should split.
8. Header.php Open the index.html file. Cut from the top to where the ends, paste it in a new PHP file, and save the file as header.php.
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 3 di 10
Building Custom WordPress Theme
16/02/10 16:08
Go to the default theme folder, open the header.php. Copy and replace the tags where it requires PHP code (Template Tag):
, <link> stylesheet, <h1>, and <div class=description> .<br />
<br />
Navigation Menu (wp_list_pages) Replace the <li> tags in the <ul id=nav> with <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?><br />
<br />
Reference: wp_list_pages.<br />
<br />
9. Sidebar.php Back to the index.html file, cut from where the <form id=searchform> start to the closing tag of <div id=sidebar> and paste it in a new PHP file, save it as<br />
<br />
sidebar.php.<br />
<br />
Replace the <form id=searchform> wrap with <?php include (TEMPLATEPATH . '/searchform.php'); ?> .<br />
<br />
Replace the category <li> tags with <?php wp_list_categories('show_count=1&title_li='); ?> Replace the archive <li> tags with <?php wp_get_archives('type=monthly'); ?><br />
<br />
References: wp_list_categories and wp_get_archives.<br />
<br />
10. Footer.php Back to the index.html file, cut from the <div id=footer> tag to the end of </html> and paste it in a new PHP file, save it as footer.php.<br />
<br />
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/<br />
<br />
Pagina 4 di 10<br />
<br />
Building Custom WordPress Theme<br />
<br />
16/02/10 16:08<br />
<br />
Recent Posts Here I used the query_post to display the 5 latest posts.<br />
<br />
Recent Comments Recent comments are generated by a plugin (included in the theme folder).<br />
<br />
11. Index.php Now in your index.html file, you should only have the <div id=content> wrap. Save the file as index.php . Insert the line: get_header , get_sidebar , and get_footer in the same order as your layout structure.<br />
<br />
12. Understanding The Loop The image below illustrates how The Loop works. The Loop is used to display blog posts and it also lets you control what to display. Basically, The Loop checks if there are posts in your blog, while there are posts, display it, if no post found, say "Not Found". http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/<br />
<br />
Pagina 5 di 10<br />
<br />
Building Custom WordPress Theme<br />
<br />
16/02/10 16:08<br />
<br />
display it, if no post found, say "Not Found".<br />
<br />
13. Copy The Loop Go to the default theme folder, open the index.php file. Copy The Loop from the default index.php and paste it in between the <div id=content>..</div> . Then, replace the static text with the WordPress Template Tags: post date, title, category, comments, next and previous link.<br />
<br />
14. Preview The Theme Congrats! You’ve done the front page (the main part of the theme). Now, login to your admin panel, go to the Design tab, you should see the GlossyBlue theme, activate it and go to the front page to preview the theme.<br />
<br />
15. Single.php Now, it is time to do the single.php template. If you want, you can go through the same process — cut & paste from the default theme. But, I find it easier to use the index.php that you just created and save it as<br />
<br />
single.php . Open the default theme single.php file and copy the Template Tags over. Then include the comments_template . The image below highlights what I’ve changed:<br />
<br />
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/<br />
<br />
Pagina 6 di 10<br />
<br />
Building Custom WordPress Theme<br />
<br />
16/02/10 16:08<br />
<br />
16. Page.php With the single.php template you just created, save it as page.php. Remove the post date, comment form, next/previous link… and that’s it.. there goes your page.php template.<br />
<br />
17. Delete The HTML Files Delete all the HTML files in the glossyblue folder (we don’t need them anymore). Technically, that is enough for a basic WordPress theme. You may notice there are more PHP files in the default theme. Well, you don’t really need those files if you just want a basic theme. For example, if the search.php or 404.php is not present in the theme folder, WordPress will automatically use the index.php to render the page. Read the Template Hierarchy for more details.<br />
<br />
18. WordPress Page Template Ok, final example. I will show you how to use Page Template to create an archive page that will list all posts on your blog (good for sitemap). Copy the archives.php file from the default theme folder. Delete the unwanted code and you should have something like this:<br />
<br />
Here I’m using the query_post ( showposts=-1 means display all posts) to display a list of all posts.<br />
<br />
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/<br />
<br />
Pagina 7 di 10<br />
<br />
Building Custom WordPress Theme<br />
<br />
16/02/10 16:08<br />
<br />
Now, login to your admin panel, write a new page, title it Archives. On the Page Template dropdown, select Archives.<br />
<br />
More Reading: Check out a list of WordPress Plugins that you may find useful. For more advance theme coding, read my WordPress Theme Hacks.<br />
<br />
What’s Next… In the next chapter, I will show you how to export your local WordPress to a web host and keep the local version for backup purpose.<br />
<br />
Comments Pages: 36 35 34 33 32 31 30 29 28 27 26 … 1 » Show All<br />
<br />
There are 353 comments (+Add)<br />
<br />
353<br />
<br />
iamoffended February 16th, 2010 at 6:24 am<br />
<br />
A quick note, its not super simple to create a static html and css from a psd if your not familiar with slicing and basic css coding. Does anyone have any good links to ruts for this process? Something for starting with a blank page, custom format for the layout?<br />
<br />
352<br />
<br />
keith February 16th, 2010 at 3:13 am<br />
<br />
cam you please help me with my sit .i want to improve the look.i an a novice http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/<br />
<br />
Pagina 8 di 10<br />
<br />
Building Custom WordPress Theme<br />
<br />
351<br />
<br />
16/02/10 16:08<br />
<br />
crewof1 February 14th, 2010 at 2:21 pm<br />
<br />
I’m also trying to figure out how to make a 3-column layout, like the recent comment below.<br />
<br />
350<br />
<br />
iamoffended February 14th, 2010 at 6:29 am<br />
<br />
Thanks, this is the most helpful tut I’ve found. How would you name the sidebar if you wanted a 3 column layeout? I.e. Sidebar left, index, sidebar right? Header, footer? Thanks again for this<br />
<br />
349<br />
<br />
Will Hull February 5th, 2010 at 12:15 pm<br />
<br />
Thank you so much for this tutorial. It helped break things down so much more than much of what is out there. I just completed coding for my blog design. I invite you to check it out. It’s all thanks to you. http://willhull.com/blog Thank you, thank you, thank you!<br />
<br />
348<br />
<br />
Rob February 4th, 2010 at 3:20 pm<br />
<br />
Hey great tut, one issue I’m having though and I’m hoping you can shed some light. I’ve developed the html and css and it works flawlessly as it is. One I start breaking it apart (header, nav, sidebar, footer, etc) it breaks. It appears that the isn’t doing what it needs to do. I’ve read around and I’m not sure if I need to define that in any way to look for header.php, footer.php, etc. But as it is I’m stuck and frustrated. Any help would be awesome! Thanks and great work!<br />
<br />
347<br />
<br />
Mina February 4th, 2010 at 6:48 am<br />
<br />
i like lay out of this site<br />
<br />
346<br />
<br />
seocontentgirl February 3rd, 2010 at 6:32 pm<br />
<br />
Now that’s what I am talking about, this is one of the best tutorials on learning to build a custom wordpress theme yet! Great work.<br />
<br />
345<br />
<br />
slit February 1st, 2010 at 5:14 am<br />
<br />
Nice Tutorial. Is it possible to get it in grman? Slit<br />
<br />
344<br />
<br />
DreamHouse January 31st, 2010 at 2:39 pm<br />
<br />
Wow! you made it easier. This is a really big help for beginners like me. thanks<br />
<br />
Pages: 36 35 34 33 32 31 30 29 28 27 26 … 1 » Show All<br />
<br />
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/<br />
<br />
Pagina 9 di 10<br />
<br />
Building Custom WordPress Theme<br />
<br />
16/02/10 16:08<br />
<br />
ABOUT Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La, who also runs N.Design Studio, IconDock, and Best Web Gallery. © Web Designer Wall 2010 .<br />
<br />
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/<br />
<br />
Pagina 10 di 10<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://idoc.tips/report/building-custom-wordpress-theme-pdf-free" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Building Custom WordPress Theme"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2025 IDOC.TIPS. All rights reserved.
<div class="pull-right">
<span><a href="https://idoc.tips/about">About Us</a></span> |
<span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> |
<span><a href="https://idoc.tips/term">Terms of Service</a></span> |
<span><a href="https://idoc.tips/copyright">Copyright</a></span> |
<span><a href="https://idoc.tips/contact">Contact Us</a></span> |
<span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://idoc.tips/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177830117-1');
</script>
<script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://idoc.tips/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_IDOCTIPS_cookie_box() {
document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/";
hide_IDOCTIPS_cookie_box();
}
function hide_IDOCTIPS_cookie_box() {
var cb = document.getElementById('IDOCTIPS_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var IDOCTIPS_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('IDOCTIPS_cookie_box_viewed');
if (IDOCTIPS_cookie_box_viewed) {
hide_IDOCTIPS_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
