Things to Include in Every Blog
In designing something new, not based off any previous version or theme, you need to make your own display classes for things like images, blockquotes, and all the things that will appear in a post.
Because I’m not using Cutline anymore for my new version, I’ve had to create all these myself and make them work with the rest of the site. These things are a must have for every blog design.
- Image styling: This one is obvious, of course, but you need a couple of things to make them look their best. Never have an image go unstyled in a post, simply because you should always make things look better when you can. A simple border and a little padding, with a nice subtle background goes a long way. Think of this as framing your picture. Make sure to add left and right floats too, as well as centered images.
- Blockquotes and pullquotes: Getting away from the traditional picture of a quotation mark can really do you some good here. You just need to break the text up, maybe with a little bit of subtle colour, but not anything that is distracting. The rule of thumb for contrast here is to use the same font colour as the regular copy. If it isn’t readable, your quotes are probably too high in contrast. Also make sure to get your left and right floats in here.
- Lists: Beyond simple indenting the list, adding images as bullets, borders to your <li>s, good padding and even a little change in background colour can really make your lists stand out. The goal here is like everything else: make it pretty, make it flow, and make it blend.
- Headings: Here you actually do want some contrast. Most designs have two main colours, while they can both be blue, there are usually two distinct colours that are prominent throughout. One can be seen as the “main” colour, being the most used, and the other would be the “accent” colour. For example, a sneak peak into the new design, my accent colour is an orange, and that’s what color my headings are. Adding a border beneath can show distinct sections and catch a reader’s eye.
- Strong: Is it just bold text, like this, or do you want it to really stand out. Give it a background, different text colour, and of course the heavier font weight to make it more than just bold text. Same thing can be said for emphasized text.
Off the single post page
All those things really are meant for the single posts and page section of your blog. There are other parts of your site that need love too, and not just in your CSS!
For instance, on the home page of the blog, there are a few goals:
- Make a good visual first impression
- Make the first post stand out enough to start reading
- Have enough content displayed at one time
- Have an “explorable” design
Those are just to name a few, and to accomplish this you can style your first post differently than the rest. Make it so that people really want to read it first, not just something the same as everything else. If you just want to display x amount of posts on the home page in full content, then go ahead, but I think you can have more success if you think it through and use your own way.
With WordPress, there are a few ways of doing this. The way that is most convenient is to run two custom loops. This will give you total control over both parts, in the easiest way possible.
I’ll assume you know the basics of the WordPress loop, if not you can read up at the Codex. The first loop (of two) you just need this line above:
<?php query_posts('showposts=1'); ?>
That will just grab your latest post, and you can display it however you want. After that, to get the next 5 or so posts starting from the post after that, is simple:
<?php rewind_posts(); query_posts('showposts=5&offset=1'); ?>
That resets the loop, so you’re not using something else that may happen before it, and the offset parameter in query_posts() does exactly that, starts 1 off of the start.
These are basic things right now, and as you get more experienced in designing and blogging, they become more obvious to you. I’ll do another part of this type of article with things appealing less to the beginner and more to the experienced WordPress user.
Leave a comment
Mike
October 24th, 2007 at 8:24 PM
Nice tips! I am going to play arround with the way my content shows up on my main page and take some of what you said into consideration.
Also good to see the pagerank didnt drop here to! Its causing such a panic everywhere!
Adam M
October 24th, 2007 at 9:32 PM
Connor when are we going to get to see this new design
I’m looking forward to it.
Sharebuilder Promo Codes
October 26th, 2007 at 2:49 PM
Another tip on the front page is to have a popular posts section. A Top Posts page is ok, but a top 5 -10 popular posts section really helps new visitors.
Martin
October 29th, 2007 at 2:52 PM
Tyler Cruz’s new theme has an excellent example of blockquotes in action. His theme has inspired me to change the CSS for some of my tags.
Connor Wilson
October 29th, 2007 at 6:25 PM
Yeah, Tyler Cruz’s new theme on a whole is pretty good. I’m not personally too fond of the guy, but he knows what he likes in terms of design. By far the best redesign of the niche thus far.
Pin
December 16th, 2007 at 3:42 AM
Important to keep yourself updated with latest WordPress version, as well as Plugins. Do not ignore them!
SirCommy
December 29th, 2007 at 7:03 PM
It’s obvious that blogs need customization and great attention to its design and content. Otherwise, you’d be forwarding up in google with a defaultish design and ‘content’ as 999 others. So you’ll get to be almost invisible and a blog that would get 2seconds type of visits.
Login »