This action might not be possible to undo. Are you sure you want to continue?
A wall of design ideas, web trends, and tutorials.
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)
Pagina 1 di 10
single.com/tutorials/building-custom-wordpress-theme/ Pagina 2 di 10 . I will use these HTML files and convert them into a theme. create a static HTML+CSS template of each page. 4.html. one of my free WordPress themes.html. Download the demo. as an example.php.html . By doing so. Why Create a Static HTML File First? Mainly because it will make the development process a lot easier. Here I’m using GlossyBlue. then all I have to do is cut & paste the WordPress code.zip to follow this tutorial. For more details.zip to see the Photoshop file. I don’t have to worry about HTML or CSS bugs during my theme making process. design a Photoshop mockup of your blog. How WordPress Theme Works If you go the default theme folder (wp-content/themes/default ). Later in the tutorial. http://www. Photoshop Mockups Based on the information gathered from the default theme. you should see many PHP files (called template file) and one style.Building Custom WordPress Theme 16/02/10 16:08 2. and page. test it across all browsers. sidebar. I usually create a HTML file for every template that I need.php << header.webdesignerwall.css file. and footer. WordPress actually uses several template files to generate the page (index. 3.php. Extract the zip and take a look at the index. validate both HTML and CSS markups. HTML + CSS After the PSD design is done. You can use my GlossyBlue HTML files in the demo. check out Site Architecture and Template Hierarchy at Codex. When you are viewing the front page.php).
Header. Change the theme name and the author information as you desire. Cut from the top to where the <!--/header --> ends. Copy the commented code at the top and paste it to the GlossyBlue style.php.Building Custom WordPress Theme 16/02/10 16:08 5. sidebar. Duplicate The Template Files Copy the GlossyBlue HTML folder into the wp-content/themes folder.php file to the glossyblue folder. 7. Splitting The Files Now you need to understand where to split the file into several files: header. 6. 8.com/tutorials/building-custom-wordpress-theme/ Pagina 3 di 10 .php and searchform.css file.webdesignerwall. http://www.php. go to the default theme folder.php.css Go to the WordPress default theme folder. Then. and save the file as header. open the style.css file.html file. and footer.php. Style. paste it in a new PHP file. The image below shows a simplified version of my index file and how the markups should split.php Open the index. copy the comments.
?> Reference: wp_list_pages. Copy and replace the tags where it requires PHP code (Template Tag): <title> . cut from where the <form id=searchform> start to the closing tag of <div id=sidebar> and paste it in a new PHP file.webdesignerwall. 10.php.php. ?> References: wp_list_categories and wp_get_archives.com/tutorials/building-custom-wordpress-theme/ Pagina 4 di 10 . Footer.php. save it as sidebar. <h1>.php Back to the index.php'). Replace the category <li> tags with <?php wp_list_categories('show_count=1&title_li='). 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='). ?> Replace the archive <li> tags with <?php wp_get_archives('type=monthly').html file. and <div class=description> . '/searchform. http://www. cut from the <div id=footer> tag to the end of </html> and paste it in a new PHP file. <link> stylesheet. open the header. Replace the <form id=searchform> wrap with <?php include (TEMPLATEPATH . Sidebar.php Back to the index. ?> . 9.html file.Building Custom WordPress Theme 16/02/10 16:08 Go to the default theme folder. save it as footer.
display it. Understanding The Loop The image below illustrates how The Loop works. say "Not Found". Recent Comments Recent comments are generated by a plugin (included in the theme folder). 12. while there are posts. and get_footer in the same order as your layout structure.com/tutorials/building-custom-wordpress-theme/ Pagina 5 di 10 .php Now in your index. The Loop checks if there are posts in your blog. Insert the line: get_header . you should only have the <div id=content> wrap. Basically. The Loop is used to display blog posts and it also lets you control what to display.html file.php .webdesignerwall. Save the file as index. 11. get_sidebar . if no post found.Building Custom WordPress Theme 16/02/10 16:08 Recent Posts Here I used the query_post to display the 5 latest posts. Index. http://www.
The image below highlights what I’ve changed: http://www. Single. next and previous link. login to your admin panel. if no post found. Open the default theme single. Copy The Loop Go to the default theme folder. replace the static text with the WordPress Template Tags: post date. Copy The Loop from the default index.php file and copy the Template Tags over.php and paste it in between the <div id=content>.php . title. comments.php file. you should see the GlossyBlue theme. open the index.php that you just created and save it as single. category. go to the Design tab. say "Not Found".Building Custom WordPress Theme 16/02/10 16:08 display it. Now.com/tutorials/building-custom-wordpress-theme/ Pagina 6 di 10 . But. If you want. it is time to do the single. Then include the comments_template . 15. Preview The Theme Congrats! You’ve done the front page (the main part of the theme).php Now.</div> . 13.php template.webdesignerwall. activate it and go to the front page to preview the theme.. 14. you can go through the same process — cut & paste from the default theme. I find it easier to use the index. Then.
there goes your page.php to render the page. For example. You may notice there are more PHP files in the default theme.php.Building Custom WordPress Theme 16/02/10 16:08 16. you don’t really need those files if you just want a basic theme. Copy the archives. Read the Template Hierarchy for more details. save it as page.php or 404.. next/previous link… and that’s it. Delete The HTML Files Delete all the HTML files in the glossyblue folder (we don’t need them anymore).php file from the default theme folder. that is enough for a basic WordPress theme. 18. 17. WordPress will automatically use the index.php is not present in the theme folder. http://www. 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).webdesignerwall. Technically. if the search.php template you just created. WordPress Page Template Ok. comment form. Well.php With the single. final example. Page. Delete the unwanted code and you should have something like this: Here I’m using the query_post ( showposts=-1 means display all posts) to display a list of all posts. Remove the post date.com/tutorials/building-custom-wordpress-theme/ Pagina 7 di 10 .php template.
login to your admin panel.Building Custom WordPress Theme 16/02/10 16:08 Now. Comments Pages: 36 35 34 33 32 31 30 29 28 27 26 … 1 » Show All There are 353 comments (+Add) 353 iamoffended February 16th.i want to improve the look.com/tutorials/building-custom-wordpress-theme/ Pagina 8 di 10 . custom format for the layout? 352 keith February 16th. 2010 at 3:13 am cam you please help me with my sit .webdesignerwall. read my WordPress Theme Hacks. its not super simple to create a static html and css from a psd if your not familiar with slicing and basic css coding. For more advance theme coding. More Reading: Check out a list of WordPress Plugins that you may find useful. I will show you how to export your local WordPress to a web host and keep the local version for backup purpose. 2010 at 6:24 am A quick note. Does anyone have any good links to ruts for this process? Something for starting with a blank page. What’s Next… In the next chapter. write a new page. title it Archives. On the Page Template dropdown. select Archives.i an a novice http://www.
nav. Is it possible to get it in grman? Slit 344 DreamHouse January 31st.php. etc) it breaks. 345 slit February 1st. 2010 at 6:29 am Thanks. sidebar.Building Custom WordPress Theme 16/02/10 16:08 351 crewof1 February 14th. this is one of the best tutorials on learning to build a custom wordpress theme yet! Great work. I’ve developed the html and css and it works flawlessly as it is. thank you! 348 Rob February 4th. How would you name the sidebar if you wanted a 3 column layeout? I. 2010 at 6:48 am i like lay out of this site 346 seocontentgirl February 3rd. one issue I’m having though and I’m hoping you can shed some light.php. sidebar right? Header. index. I’ve read around and I’m not sure if I need to define that in any way to look for header. footer. footer? Thanks again for this 349 Will Hull February 5th. thanks Pages: 36 35 34 33 32 31 30 29 28 27 26 … 1 » Show All http://www. I just completed coding for my blog design.com/blog Thank you. It’s all thanks to you. It appears that the isn’t doing what it needs to do.e.com/tutorials/building-custom-wordpress-theme/ Pagina 9 di 10 . 2010 at 5:14 am Nice Tutorial. This is a really big help for beginners like me. this is the most helpful tut I’ve found. 350 iamoffended February 14th. etc. footer. I invite you to check it out.webdesignerwall. like the recent comment below. Any help would be awesome! Thanks and great work! 347 Mina February 4th. Sidebar left. One I start breaking it apart (header. 2010 at 12:15 pm Thank you so much for this tutorial. thank you. 2010 at 6:32 pm Now that’s what I am talking about. 2010 at 2:21 pm I’m also trying to figure out how to make a 3-column layout. http://willhull. But as it is I’m stuck and frustrated. 2010 at 2:39 pm Wow! you made it easier. It helped break things down so much more than much of what is out there. 2010 at 3:20 pm Hey great tut.
webdesignerwall.Design Studio. http://www. and Best Web Gallery. and tutorials.Building Custom WordPress Theme 16/02/10 16:08 ABOUT Web Designer Wall is all about design. IconDock. who also runs N. ideas. © Web Designer Wall 2010 .com/tutorials/building-custom-wordpress-theme/ Pagina 10 di 10 . It is designed and maintained by Nick La. web trends.
This action might not be possible to undo. Are you sure you want to continue?