Most articles on WordPress themes focus on building a WordPress theme from the view point of a developer. This series of articles will instead be focused on breaking down an existing free WordPress theme and will pay particular attention to the design of the theme throughout the series. After breaking down everything, this series will focus on adding more features and improving the design of the WordPress theme. For example, topics that will be covered are creating and integrating a variety of plugins, scripts, and redesigning parts of the theme to make it even better.
I will be going over the header.php, sidebar.php, footer.php, and index.php files in this part and will cover the rest in the second part of this article.
Header.php
The header contains exactly what you think, everything on top. Basically this includes general information about the document type, the title, links to external scripts, and the navigations located in the top part of the WordPress Theme.
1. General information about the page
" />
This tells the browser what type of page it is and how to render it. It is very unlikely that you will ever have to change it.
2. Title
<?php wp_title();
if (function_exists('is_tag') and is_tag()) { ?>Tag Archive for <?php echo $tag; }
if (is_archive()) { ?> archive<?php }
elseif (is_search()) { ?> Search for <?php echo $s; }
if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?>
<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
The title part is slightly a little more complicated here than usual. What it does is it checks to see what the current page it has been loaded on is. Based on what the page it is, it will display different titles. But it will always include the blog’s name and description that is set in the settings of WordPress.
3. External scripts
The first external script called is the reset.css, which does exactly what it says and resets all the elements of the html to a base level in order to take care of the inconsistencies between how browsers render CSS/XHTML. For more information on reset.css, check out Meyerweb.
The second external script called is style.css, which is what your main css stylesheet needs to be named or else WordPress will get pissed. The url of which has its own special php call as you can see.
The following code is used to get the url of where your theme is located so you can link to the scripts, css, and other files you have in your theme.
This part of the header is where we show some love for internet explorer by paying closer attention to all of its beautiful little quirks. If the page detects that the browser is internet explorer 6 or less, then it will call a iefix.css to fix some css issues and unitpngfix.js to fix the issue with transparent png.
The logo uses a transparent png so that it displays nicely over the gradient background in the header. Without the fix, it looks terrible. The fix is provided by the awesome guys at Unit Interactive Labs.
The second if clause just adds a small css tweak for internet explorer 7 so that it looks just as pretty as it would in other browsers. For more information on css fixes for browser inconsistencies, check out Position is Everything.
5. WordPress plugin
This allows plugins that need to output data into the
tags to be able to do so. So don’t delete it.
6. Category Navigation
The wp_list_categories() function with the parameters of ‘hide_empty=0&title_li=&depth=1′ provides a list of all the categories (first-level only), shows even empty categories, and doesn’t output a title. To see what else you can do with wp_list_categories(), check out the WordPress Codex on wp_list_categories.
7. Logo
The get_settings(’home’) function provides the link to the index of the blog and bloginfo(’name’) grabs the name of the blog. While the text gets indented off to the side anyways, it is important to have it there for SEO.
8. Page Navigation
The if clause inside of
tags changes the class depending on what type of page you are currently on. The current page gets assigned a class of “current_page_item” for styling purposes. The wp_list_pages() function follows the same convention and will also assign the class name of “current_page_item” if it is the current page.
The wp_list_pages() function with the parameter of ’sort_column=id&depth=1&title_li=’ displays in a list all pages (first-level only), sorted by id, and doesn’t output a title.
Sidebar.php
The sidebar contains several other methods of navigating the blog. It contains the search form, list of popular articles, and buttons for subscribing to your feed either by RSS or Email.
1. Subscribe buttons
Subscribe to the feed
Subscribe by RSS
The bloginfo(’rss2_url’) function provides the link to the rss2 feed.
The second part is commented out with because you will need a plugin to be able to allow readers to subscribe by email or a link to a feedburner’s email page. There is no point in showing it unless you want to use it. Just delete the comments and put the link in to activate it.
2. Popular posts
Popular posts
The function query_posts() with the parameter of ‘category_name=Popular&showposts=5′ shows the latest 5 posts from the category ‘Popular’. The while() function loops through the results until there are no more posts and displays the link and title of each post.
This is the basic search form. When someone submits a search, WordPress detects that action and displays the results according to search.php. If no search.php exists it will use index.php to display it. The wp_specialchars() function just strips out all the special characters before submitting the search query.
Footer
The footer in this theme displays the latest 5 posts and a little about section as well as some additional copy at the end.
1. Recent Posts
Recent posts
The get_posts() function with the parameter of ‘numberposts=5′ returns the latest 5 posts. It then loops through a foreach loop and for each post it calls another function setup_postdata(), which gives us access to more than the title and link of the post. In this case, we need the comments number as well.
The comments_number() function displays the number of comments for that particular post. The first parameter decides what to display when there are no comments. The second parameter decides what to display when there is only one comment. The third parameter decides what to display when there are more than one comment.
The include() function grabs the file passed to the function and displays everything that is in there. The TEMPLATEPATH is just the path to where your theme is located. In order to change what is displayed, just open about_text.txt and edit it as you please.
The date() function with the parameter of ‘Y’ just grabs the current year formatted as XXXX. The function _e() is for translating the text into different localization, if one doesn’t exist, it just displays what is inside the single quotes.
Index.php is the basic way of displaying a page, it is used when there are no other better page templates to use. It also serves as the home page.
1. Header
Grabs the header.php file and spits it out there.
2. The WordPress Loop
Well that is just the beginning of the loop. The if clause checks if there are any posts, if there are then it will loop through them and display them according to how it is arranged inside the loop.
If there are no posts then it will just go to the following code:
Not Found
Sorry, but you are looking for something that isn't here.
At this point, it just displays what is after the and before the when there are no posts. You can put anything you want in there to let the reader know there are no posts.
3. Inside the WordPress Loop
Posted by in
Read more'); ?>
The the_time() function with the parameter of ‘F j, Y’ grabs the date of the post and formats it to display the full textual representation of the month, followed by the day of the month without leading zeros, then a comma, and finally the year in the format of XXXX. For more cool ways you can display the date, check out php.net’s extensive documentation on it.
The the_author_link() grabs the name of the author and wraps it with a link to the author’s website. There are many other ways you can display the author’s name and change where it links to at WordPress codex on template tags.
The the_category() function with the parameter of ‘, ‘ displays a link to each category separated by a comma and space that the post is assigned to in WordPress. More on the_category() function at WordPress codex on the_category.
Finally, the the_content() function displays the actual post. When you use the tag, the post will be cut off and display what is inside the single quotes at the end of the post wrapped in a link to the full article.
4. Page Navigation
This checks if there is a function called wp_pagenavi and then calls it if there is. WP-PageNavi is a plugin that makes pages much easier to organize. I modified this plugin a bit and inserted it into functions.php so that it doesn’t require any installation.
5. Sidebar and Footer
These last two functions do exactly what they sound like they do, they grab the sidebar.php and footer.php and spits them out right there.
Conclusion
This concludes the first part of this article. The next part of this article will cover the single.php, comments.php, and the rest of the theme. Check out the links below to help familiarize yourself more with WordPress functions/template tags.
Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.
Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.
Does your creative process start with the same sketch of a web page every time? Or even the same Photoshop template? You could be missing out on the most innovative solutions by not putting enough thought into the concept, says Victor Lombardi. Here he outlines three methods for pulling apart a brief to tackle the underlying concept design.
Yes, this version is really 0.1 because this theme was designed with the intention of being in continual development as a project for this blog. Basically what that means is that this theme is intended to be used as a part of a series of tutorials on coding, designing, and redesigning. By the time it hits 1.0, it will be loaded with new features and of course a redesign as it is reassesed as time goes on.
The next series of articles will focus on how this theme was built from scratch. Then after that, future articles will focus on adding more features and improving the design of the theme. If you have anything you would like me to cover in particular, feel free to drop me a message or comment.
Subscribe today by RSS for free and get more tips on improving your blog design. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.
Hire me!
Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.
I am fascinated by the details in a blog design and comment designs are no exceptions. The comments are really the only real form of interaction between readers and bloggers within the blog, yet many blog designers continue to throw together comment designs without giving it much thought. This list continues from the other comment design list to show 30 more blogs where the blog designer puts more attention and care to the little details of their comment design and it is certainly worth it. Take a look for yourself at these comment designs.
Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.
Hire me!
Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.
Designers should have at LEAST 1,000 fonts on their computer and if you aren’t lying to yourself, you’re like me and have closer to 2,000 (the last time I counted – a month or two before). Maybe you have 100 or more paid fonts mixed in with your 1000+ free fonts, but do you have all of these? If not, you should! I went through dafont on a hunt to find 40 of the best free grunge fonts. So here is a list of 40 free fonts from DaFont that you MUST HAVE!
If you know of a type of font you’d like me to hunt down for you and make a list of, please let me know and I’ll do my best to get a list together for your favorite font type.
The past three months, I had a chance to work with two great interns. It was a pleasure walking them through the process of taking a project from the sketch/thumbnail stages to Photoshop mock-up, to print ready art/html/css.
Before their intership ended. I gave them a few tips on preparing for their interviews. I’m sharing the same tips here, in hopes, it may be helpful to other designers just starting out.
I would like to also thank Emily Lewis, owner of A Blog Not Limited, with additions to my list; Any Questions? and Thank You Letter, along with her suggestions.
+ Be Prepared For The Interview – Wear your best clothes: dress, dress shirt, tie, shoes, etc. Be confident, if not, act like you’re. Do research on the company before the interview, Google (what they specialize in, what they are about).
+ Brand Yourself – Let employers see you as a brand/product, a total package. Everything should look similar: resume, business cards, leave behind and your portfolio pages.
+ Resume – Don’t clutter your resume. It should be designed but not overly designed. Make sure it’s simple and easy to access your information.
+ Any Questions? – In most, if not all interviews. You will be asked if you have any questions for them. Be prepared with a few thoughtful questions that show your interest in the job, but also your commitment to your career. Such as: “Can you give me an example of how the team/department works in terms of division of tasks?” Or: “What are the growth opportunities for this position in terms of either job growth, continuing education or both?”
+ Thank You Letter – Never forget to follow-up with a thank you letter (or email, though letter gives a personal touch). Make sure to, obviously, thank the interviewer for the opportunity. But also to reiterate how you can benefit the organization and, conversely, how the organization can benefit you
+ Portfolio – Your portfolio should have between 8-10 pieces of your best work, too many pieces will bore the interviewer. Don’t put pieces in you don’t like. Make sure you have nice quality printouts. Try to include a wide range of design projects in your portfolio. You can also tailor your portfolio to specific design positions like logo design or web design, only show those pieces.
+ Leave Behind – You may want to create a leave behind promotional piece; postcard or a folder with 3-4 samples of your work, resume and business card. This will keep you in their minds and give an impression that you’re willing to take that extra step.
+ Website – Make sure you have a website or a place to display your work with all your information. Also make sure to have different file formats of your resume for potential employers, so they can download: pdf, Microsoft Word document, text file.
If you’re not comfortable with building a website yourself. There are many free online web galleries you can upload to, below are a few.
For those of us in the design community, we all know about the new digg-like design site Vot.eti.me which is a product of the ever popular Styl.eti.me If you haven’t seen vot.eti.me yet, go check it out. Now, the reason I am writing this post on the blog is to let you know that I’ve updated the sociable plug-in which was originally created by Peter Harkins and maintained by Joost de Valk since early 2008. The plug-in now not only includes vot.eti.me in the options panel, but it also makes it one of the default options. The original had the following as the default options:
Digg
Sphinn
Del.icio.us
Facebook
Mixx
Google
For those of us who design for a living or run design blogs, I know that there should be some better default options built into the plug-in to better suit our target visitor. So now the plug-in is defaulted to show the following:
Vot.eti.me
Stumbleupon
Design Float
Del.icio.us
Digg
Twit This
Email
If you think that the plug-in should be defaulted with any others, let me know and I’ll update it here. You can download the plug-in zip file below. Any questions/comments/tips leave me a comment and let me know.
I want to thank each and every person who voted. It was very close at the end and Dark Rainbow beat out Whiteboard by just one vote!
Now, what happens next?
Well, I have taken all of the comments and suggestions you guys left in the comments and have been working on making Dark Rainbow easily work for everyone. Some noted that the light gray text on black background wasn’t enough contrast, so I’ve upped the contrast for better readability. I’ve made other minor design changes (organization of content), and will be launching CSSgirl on Dark Rainbow within the next two weeks!
What about the other themes?
Well, here’s the best news for those who voted for one of the three other themes: I’m converting each one of these to generic WordPress themes for free use! Those themes will be ready within the next month and I’ll make an announcement of where you can demo and download them.
Once again I appreciate all the votes and comments.
“You are either progressing or regressing. There is no such thing as standing still” (1)
Introduction
A blog design in it’s simplest form is an interface between the user and the data on the blog. It is the job of the blog design to make it as easy as possible for the user to be able to tell if the blog contains data that the user might be interested in. And if it does then it needs to be able to display it in a way that makes it easy for the user to be able to consume that data. That will never change.
Everything else about blogs do change though. Blogs exist in a fast-paced environment where not only are changes fast, but news of them are just as fast if not faster. Blog designs need to be able to change along with the blogs in order to meet any new needs or goals that appear. A blog design will never be done simply because blogs will never stop evolving. What makes sense one moment won’t necessarily hold true the next moment.
1. The environment changes all the time.
The environment I am referring to is everything that relates directly or indirectly to the blog design, including the blogosphere, technology, widgets, plugins, etc. These elements of the environment change all the time so it is important to reassess if the blog design meets it’s goals whatever that may be for that particular blog the best way it can be. For example, new technology could make accomplishing certain goals easier so it is important to continually reassess the blog design by asking yourself how you can improve on your blog design.
2. Just because it was true five minutes ago, doesn’t mean it will be true tomorrow
Just as the environment changes all the time, the decisions we make on our blog design might work well one moment based on the current situation. But since situations changes all the time as well, it doesn’t necessarily mean it will continue to work later on. So just because you have been doing something a certain way for a long time does not mean it is still the best method later on.
3. You change as time goes on
You get better, experience new things, learn new skills, and so what you can do for your blog design changes. Therefore it is important to reassess what else you can do for your blog design that you might not have been able to do before because of lack of knowledge or experience.
4. What seemed like a great idea at one moment, might not be later
Tables used to be a great idea for layouts and we all know how GREAT that was. It has thankfully died out for the most part. Trends come and go, reassess your blog design periodically so you are not the last person to know when a trend has gone because it has been proven to suck.
5. New research can render parts of your blog design old
Guys in white lab coats spend a great part of their lives in cages to give us valuable research on various topics, such as usability, accessibility, psychology, perception, and other cool things. In order to not waste their sacrifices and make your blog designs better, it is important to listen when they talk. Occasionally new research could change a commonly established practice to not be as great as it was thought to be or new ideas that replaces old ones.
6. You are human
As humans we might like a blog design for the first few months, but after a period of time we just get sick of it. How long it takes for a person to reach that point differs from person to person, but inevitably we get sick of staring at the same old blog design and we want to redesign it. (It takes me about 2 weeks) On the upside, it allows us to make more radical changes instead of just small ones.
7. What we need the blog to do changes
At the beginning, a blog design might be created just for the purpose of blogging, but over time the needs of the blogger might change. For example, a blogger might decide that he/she wants to make money off the blog, but advertisement blocks were never taken into consideration for the first design. While ads could be forced into the old design, it is much better to redesign it to fulfill the blog’s new needs.
8. Pink is no longer your favorite color
It happens, your tastes change and for a lot of people the blog represents their personality. So you might deem it is important enough for your blog design to make changes to match your new-found favorite color or anything else you feel is important to reflect about your personality.
9. Readers change
Imagine this, your blog suddenly goes from the cozy 300 readers that you are used to and blows up to 1,000 readers. That doesn’t mean that you get more of the same users, it could mean that you got new users that are nothing like your old users and they may have different needs that you need to adjust your blog design for.
10. There is no such thing as perfection
But you can get pretty damn close by continually working on your blog design to make it better.
Conclusion
In the end, blog design trends come and go, but the basics will always remain important for a great blog design. But that doesn’t stop the fact that small improvements over time result in big improvements. Never stop trying to improve your blog design and reassessing it to make sure it is the best you can make it.
Subscribe today by RSS for free and get more tips on improving your blog design. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.
References
1. “Pocket Sponsor: 24/7 Back to the Basics, Support for Addiction Recovery” By Shelly Marshall (p 16)
Hi, my name is Vinh Le. Thanks for reading my article. If you are interested in the blog design services that I offer, please check out my services page.
30 More Must See Comment Designs for Blog Designers
Comments Off
Posted on 24th September 2008 by Vinh Le in internet |Uncategorized
ajax, bc, blog design, blog designer, buddypress, canada, cheap, CMS, comment design, dialup, discounts, drupal, gadget, hosting, html, inexpensive, islandnet.com, joomla, mysql, news, perl, php, programming, python, reliable, rewards, seo, unlimited databases, unlimited email, v4, v5, victoria, wordpress, wp, xoops
I am fascinated by the details in a blog design and comment designs are no exceptions. The comments are really the only real form of interaction between readers and bloggers within the blog, yet many blog designers continue to throw together comment designs without giving it much thought. This list continues from the other comment design list to show 30 more blogs where the blog designer puts more attention and care to the little details of their comment design and it is certainly worth it. Take a look for yourself at these comment designs.
1. 404uxd
2. antiphrasis
3. Avalonstar
4. Blog Design Studio
5. Carlos Leopoldo
6. Challies
7. Chilligavva
8. coda.coza
9. Creative Curio
10. cssaddict
11. Design Disease
12. Design Intellection
13. Design Snack
14. DesignWorkPlan
15. Elliot Jay Stocks
16. Ecstatic Media
17. Freelenz
18. greg-wood.co.uk
19. Jeff Sarmiento
20. Kulturbanause
21. MacRabbit
22. Monsieurlam
23. Particletree
24. RIKCAT
25. Simone Maranzana
26. Natalie Jost
27. The Swell Guys
28. Twitter
29. Wilson Miner
30. Zinaz
Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.
Hire me!
Related posts: