|
WordPress: CMS: |
| Skimmed from: | http://ageeksjourney.com/wordpress/how-to-create-a-wordpress-theme-... |
| Added on: | Apr 03, 2008 |
| Description: | This is the eighth part of how to create a WordPress theme. In the last part How To Create A WordPress Theme - Part 7 we covered some useful plugins that can enhance the usability of your blog. You can have some visual variety in a WordPress theme by having different headers and sidebars on different types of page. There are two ways to do this. The first way is by having some php code that queries the current page and then depending on the answer loads up the correct sidebar or header. The other way is to hard-code the calls for the header or sidebar in each template. I prefer to do it by using the second method as it is slightly faster it just loads the right bits instead of asking questions first and then loading the correct sidebar. To load the header Wordpress use the code to load a file named header.php. If you want to load any other file for example headpost.php you should use instead. The same applies to the sidebar and footer instead of using get_sidebar() or get_footer() you use the . If you want to use the first method it would look something like this: Here I want to use the standard header.php on all pages except the single post page the 404 error page and the search results page. I would use this method only if I had a very minimal theme with no templates except the index.php. All of this code would replace the line: When I create a theme that has provided all the templates then I will use the second method and simply replace the line with on each template. Alternate Headers As an example I have recolored the header from gray to blue and I would like to use it on the single post page only. There are two graphics involved in the change the bar itself (topbar.jpg) and the rss icon (toprss.jpg) that overlaps the bar. I did the changes in PhotoShop and saved the files as topbar-blue.jpg and toprss-blue.jpg respectively. Load header.php and save it as header_single.php Load single.php and change the first line from: to: And save it. Back in header_single.php there are two changes the first is on line 33 where toprss.jpg is referenced. Change the file name to toprss-blue.jpg. The second change is for the top bar is a little more difficult. At the moment topbar.jpg has been defined as a background for the body you cannot have two body’s but you can assign a class or id to a body so in header_single.php change line 29 from: to: Then in style.css find the body definition around line 18 and then straight after it’s definition add: body.spage { background: #e8e8e8 url(images/topbar-blue.jpg) repeat-x top; } Save all files if you haven’t already and then preview in your browser and you should now see a blue gradient bar instead of the gray gradient. If this theme only had the index.php and no other templates you would do everything exactly the same EXCEPT in index.php you would replace: with: Alternate Sidebars I find it really handy to have different stuff in the sidebar on different pages. For example on this blog on most pages I have the Latest Comments plugin but on the Single Post Page I have the Latest Posts plugin. This means that once you have finished reading a post it is easier to go to another post but on every other page you can see that people are commenting. Alternate Sidebars are made like alternate headers you can use either method one or two. Either way you load and then save the sidebar.php with a different name. If you have widget enabled sidebars then you need to modify the new sidebars. In this theme there are five "sidebars" three in the footer and two in the sidebar so in the new sidebar you should change the: and to: and respectively. This will allow you to have different widgets on different sidebars. If you want different footers for this theme you would do the same just remember to change the sidebar numbers so that they are all unique. If you want to have different plugins then all you do is paste in the code for the plugin in the respective sidebar. And that is about it for this part next time will be a wrap up of this series I have a couple of items in mind but if there’s anything you would like to know or you have any questions leave a comment below and I will answer them in the next post. Related posts:How To Create A WordPress Theme - Part 9How To Create A Wordpress Theme - Part 5How To Create A Wordpress Theme - Part 4How To Modify A WordPress Theme - Part 2How To Modify A WordPress Theme - Part 1 |
