6863 items (1599 unread) in 13 feeds
Web
(347 unread)
Design
(223 unread)
Apple
(159 unread)
Photography
(1 unread)
SEO
(869 unread)
Related tags: plugin [+], Webdesign [+], Themes [+], plugins [+], php [+], Theme [+], Templates [+], Blog [+], webdev [+], tutorials [+], security [+], related [+], inspiration [+], cms [+], Tips [+], Resources [+], Mobile [+], Development [+], Design [+], wordpresstutorials [+], wordcampuk [+], wiki [+], w [+], upgrade [+], thumbnail [+], tags [+], tagging [+], slideshare [+], post [+], performance [+], mysql [+], howto [+], hacks [+], free [+], eesti [+], developers [+], devel [+], designers [+], cheatsheet [+], cache [+], WooThemes [+], Tools [+], ThemeForest [+], Social [+], Search [+], Password [+], Optimization [+], CSS [+], BuddyPress [+]
I really like this feature. It’s extremely useful and saves lot of time. Sometimes I get new ideas for posts while I’m just browsing the net or checking my favorite blogs/forums but the problem is that I usually don’t have enough time to write the post right away or simply I’m just too tired. That’s exactly the situation when this handy feature becomes very helpful. I just log into the wordpress admin panel, open a new post, fill in a title and few sentences containing as much information as possible so I won’t forget the idea. Then I save it as a draft. Once I’m in a mood to write a new post I just open my drafts and choose one of the brainstormed ideas I’ve accumulated. Sounds good, doesn’t it?
So How Does It Work?It’s pretty intuitive and straightforward. Just open the new post and fill in the tile and few sentences that describes the idea. Now save the post without publishing it. You can access your drafts from the dashboard by clicking the link in the “Right Now” box.
As you can see it’s not difficult and it will save you lot of time. Instead of spending about half an hour trying to come up with an interesting idea you’ll be able to start writing immediately. But remember not to leave unfinished posts for too long because it can easily happen that even from the title and short description you won’t be able to understand what you meant to write about. For example, I have abandoned an unfinished article called “Webdesign And Typography” for too long (almost a month) and when I have actually decided to finish it I couldn’t remember what exactly I meant to write about.
Finally, don’t delete your drafts even though they make no sense at all to you. Just leave them sitting there and maybe you’ll be lucky and the original idea will pop up in your head again.
Congratulations! This is the final part fo my guide and by the time you read this you should be able to code your own wordpress theme. This is mainly a recapitulation of previous four parts. I suppose that you have read through all previus chapters - if not, check them out: Part I, Part II Part III Part IV
You can download the working theme here (just in case there were some typos or you are just too lazy to rewrite codes - though I highly recommend you to actually manually rewrite everything… believe me, you will learn lot of useful stuff). This is how it should look like:
As you can see the theme is very simple. But that’s alright. The aim of this tutorial was to teach you how to correctly code the wordpress theme. Now you can start playing with stylesheets and modifying the looks as you wish. You are on a good way to become a successful wordpress theme developer.
Getting closer to finishing your first wordpress theme. However there’s one important thing left - sidebar. That’s right, every blog needs a well organized and user-friendly navigation. It’s actually pretty simple. We just need to call few wordpress functions, add few lines to the stylesheet and we’re done.
Widgetized SidebarLet’s start with an unordered list. Open the sidebar.php and fill in:
<div id=”sidebar”>
<ul>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
// Here we are going to add all other codes…
<?php endif; ?>
</ul>
</div><– close sidebar –>
The two lines between the <ul> and </ul> tags will widgetize your sidebar - enabling you to quickly reorganize the items in your sidebar from within the admin panel. One last thing before we move to categories. Add the following to your stylesheet:
ul,li {list-style:none;}
It will remove the ugly little squares from list items. Anyways you’ll probably add your own little images later.
CategoriesThe first item in the unordered list will contain categories:
/* Function _e(’Categories’) will print the word “Categories” */
<li><h2><?php _e(’Categories’); ?></h2>
<ul>
/* This function calls for the list of category links and prints it */
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0?); ?>
</ul>
</li>
The wp_list_cats() function contain few arguments. Let’s explain them:
Archives And Blogrollsort_column=name - category links will be displayed in alphabetical order
optioncount=1 - displays the number of posts after each cateogory link (change “1″ to “0″ in order to hide the numbers)
hierarchial=0 - this turns off displaying sub-categories in sub-list-items (change “0″ to “1″ in order to turn on)
Type the following code under the categories listing to display monthly archives:
<li><h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>
Now the blogroll links:
Meta Tags<li>
<ul>
<?php get_links(-1, ‘<li>’, ‘</li>’, ‘ - ‘); ?>
</ul>
</li>
The latter code will diplay the “Register” link, “Login” link (if you have already registered), “Logout” (if logged in) and “Site admin” link:
<li><h2><?php _e(’Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
Remember that you don’t need to have meta section in your sidebar. You can still get to the login page by typing into your browser http://yourblog.com/wp-login.php.
That’s it for the sidebar. I told you it was easy. Let’s summarize how the sidebar.php should look now:
Horizontal Navigation<div id=”sidebar”>
<ul>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
<li><h2><?php _e(’Categories’); ?></h2>
<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0?); ?>
</ul><br />
</li>
<li><h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>
<li>
<ul><br />
<li><h2><?php _e(’Blogroll’); ?></h2></li>
<?php get_links(-1, ‘<li>’, ‘</li>’, ‘ - ‘); ?>
</ul><br />
</li>
<li><h2><?php _e(’Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div><!– close sidebar –>
We will add page links into horizontal navigation div we have in the header template. Open the header.php file and add between <div id=”nav”> and </div><!– close nav –> tags:
<?php wp_list_pages(’title_li=’); ?>
The only problem is that the pages will be displayed vertically. To make them display horizontally in one row just add to the style.css file:
ul,li {list-style:none;}
#nav ul li {display:inline;padding:2px 10px 2px 10px;}
.entry {margin-bottom:20px;} /* This is just a little addition to visually divide the posts at the main index page */
I have also included some padding so the links won’t be too crowded…
FooterUsually there is just some copyright information plus maybe a few links in the footer. We will add just copyright. Open the footer.php file and copy and paste:
Your Theme’s Ready For The First Launch!<div id=”footer”>
Copyright © 2008 <?php bloginfo(’name’); // Function bloginfo(’name’) will return your blog’s name ?>
</div><!– close footer –>
</div><!– close wrapper –>
</body>
</html>
Alright. Activate the theme in the admin panel and it should be working. There’s still lot of space for improvements but the hardest part has already ended. In the next chapter I’ll show you few very useful tweaks and stylesheet tricks to make your theme look better.
Related articles: Part I, Part II Part III