WPDesigner

Aug.21.2007

How to Put Your Best Content Forward

Filed under: Tutorials

Don’t let your best content get lost in the archives. Use them to impress first-time readers. Here are two ways to put your best content forward.

First Method: WP-Sticky Plugin

If you publish multiple times per day or simply want to feature the best article of the week then install the WP-Sticky plugin by Lester Chan. It’ll allow you to feature or sticky the article that you want visitors to read first. It does this by letting you to pick which post to sticky then displays that sticky post before all the other posts on your page.

Installation is easy, simply upload to the plugins folder and activate it. Next, go to the edit screen of the post that you want to sticky. Select the Announcement or Sticky option under the Post Sticky Status box. Note, this plugin displays Annoucnement posts before Sticky posts. The Announcement option is there to make one sticky post more important than all other sticky posts.

Second Method: DOMTab

As your blog grows, you’ll find it more and more difficult to feature all the best links in one simple list. There’s simply not enough room, not even in the sidebar. What if there was an organized way to categorize those links and feature them as multiple lists using less space? DOMTab is that solution.

Take a look at this blog and Problogger, both blogs feature a section or block called, “Best of,” which is made up of multiple lists of links, linking to the best content. Both sections of both blogs are powered by DOMTab. Now you know where I got the DOMTab idea from.

DOMTab might look difficult to use, but it really isn’t. On its download page, there are very specific instructions on how to use it and how you can style it to make it your own. If that’s not enough, don’t worry. I’ll also show you how I did it.

Placement of Best Content

But before that, you need to decide where to place this “Best of” section. Unlike Problogger’s layout, which separates this section from the main content, I placed it in between the first and second posts on the home page, in the main content area.

(Why? If I want my best content to be one of the first things new readers come across then why would I place it in the sidebar to let it get lost in sidebar clutter?)

And don’t forget, my first post is a Sticky post so the home page now displays content in this order: Featured Post, Best of Wpdesigner, Recent Posts.

Why not let “Best of” be first? It comes second on this blog because I want to show my recent best content (Sticky post) to the loyal readers first. Readers that have read most of the best content don’t need to see it again and again every time they come back to the home page. Don’t force them to overlook the whole first half of your home page by putting “Best of” first.

How to use DOMTab

If you haven’t already, download the DOMTab Javascript file. To use it, you need to take three steps: link to the Javascript, insert the DOMTab codes with your links, and style it.

Linking to the Javascript: Place the following codes in the head of your header.php file. Don’t try to copy and paste the codes. My blog uses smart quotes when I display codes in a blog post. They will not work properly if you copy and paste.

The codes above assume that you’ve placed the domtab.js file in the root of your theme’s folder.

Inserting DOMTab with your content or links: The following screenshot shows the basic structure of DOMTab.

The structure starts out with a DIV tag named “domtab” or simply an invisible box that does nothing. Under or nesting within it is an unordered-list or UL tag named “domtabs.” Notice the extra s or you’ll have a hard time styling it. Nesting in the UL tag are two LI tags or list-items: Test 1 and Test 2. Notice, both are links, which were named t1 and t2. You can change Test 1, Test 2, t1, and t2 to customize it for your blog.

For my blog, Test 1 is Tutorials and Test 2 is Themes.

Still within the domtab DIV, under the domtabs UL tag are generic or nameless DIV tags surrounding H2 heading links, which were named t1 and t2 to match the list-items within the domtabs UL.

The areas within the brackets are where you can customize and place your own content or list of links. I went with the list of links.

To make it more convenient for me to reuse the “Best of” section throughout my blog, I placed everything in a filed named bestofwpdesigner.php. Every time I need it, I’ll use:

<?php include (TEMPLATEPATH . ‘/bestofwpdesigner.com’); ?>

Styling DOMTab: I didn’t do anything special to style it. For the domtabs UL or unordered list of link items, I turned it into a horizontal menu. Here’s how to create a horizontal menu. And here’s my own codes to style the domtabs UL portion of the whole structure:

ul.domtabs{
float: left;
width: 583px;
list-style-type: none;
margin: 0;
padding: 0;
background: #fcfcfc;
border-bottom: 1px solid #eee;
font-family: georgia, serif;
clear: both;
}

ul.domtabs li{
float: left;
display: inline;
}

ul.domtabs li a{
display: block;
padding: 10px;
border-right: 1px solid #eee;
text-decoration: none;
color: #666;
background: #fcfcfc;
}

ul.domtabs li a:hover{
text-decoration: underline;
}

ul.domtabs li.active a{
background: #fff;
}

As icing on the cake, here’s how I made the “Best of” section show up under the first post on the home page.

Open up the index.php file. Place

<?php $count = 1 ?>

between if…have_posts and while…have_posts like this:

<?php if(have_posts()) : ?> <?php $count = 1 ?> <?php while(have_posts()) : the_post(); ?>

Before

<?php endwhile; ?>

, add:

<?php if ($count==1) { ?>

<?php include (TEMPLATEPATH . ‘/bestofwpdesigner.php’); ?></div>

<?php } ?>

<?php $count = $count + 1; ?>

If you’re inserting the “Best of” section by including it as a file like I am, change bestofwpdesigner.php to your own file name. If you’re not inserting it by including it as a file then place all the DOMTab codes in between:

<?php if ($count==1) { ?>

and

<?php } ?>

One more thing, if you want “Best of” to appear under the second post. Change $count==1 to $count==2. Easy huh? Now you know how this blog and how you can put the best content forward. The codes used to place the “Best of” section in between posts were taken from the ProSense theme.

Coming soon are more tutorials on blog design tweaks to improve your blog and the user’s experience.

What's Next?

Better Blogging with Michael Martine:

#1 of 90
2007.08.21

Small Potato, I have to hand it to you as a theme designer myself, you really know what you’re doing! I’m working on a design for a client and this post has helped me by saving me a lot of time searching and experimenting. You rock!

Small Potato:

#2 of 90
2007.08.21

Thanks Michael

Bob:

#3 of 90
2007.08.21

totally awesome. i’ll try it out. thanks sp. you make me happy to be your rss subscriber. i really enjoy with your blog. also i’m waiting your premium theme.

Andra:

#4 of 90
2007.08.21

Well Done SP. Big piece of contribution.

Have a nice week.

Nate:

#5 of 90
2007.08.21

Awesome post SP!

Nice from Thailand (www.SE7ENize.com):

#6 of 90
2007.08.21

Great post SP! I found that DOMtab on many sites and always wonder how to do it. Thanks for the tutorial

Randa Clay:

#7 of 90
2007.08.22

Thanks very much for providing such a great tutorial on this. I wondered how it was done on Problogger, and I didn’t realize that it was so accessible. I’m considering moving to a “portal” page on my site, and will definitely be coming back to this post when I do.
Thanks!

Ian Stewart:

#8 of 90
2007.08.22

Wow. Just, wow.

Tim Probst:

#9 of 90
2007.08.22

Small Potato, this is exactly the help I needed for a problem I was trying to solve. Thanks for all of the great information!

I switched my blog over to your Pride theme last week. It looks better than ever. Thanks again!

Small Potato:

#10 of 90
2007.08.22

Thanks everyone. If it comes up again, I’ll delve deeper in styling DOMTab.

Great Baron Unleashed! » Blog Archive » Thots + More WordPress Resources:

#11 of 90
2007.08.22

[…] such as this. This information was obtained from WPDesigner, specifically the article titled: “How to Put Your Best Content Forward”. I highly suggest you visit the page to get instruction on how to use the plugins below (He has […]

Blogæ–‡ç« çš„ç»„ç»‡ | TechPush:

#12 of 90
2007.08.22

[…] PSï¼šè¯´åˆ°è‡ªèæ–‡ç« çš„ç»„ç»‡ï¼Œå°åœŸè±†åˆšå†™äº†ä¸€ç¯‡å…³äºŽå¦‚æžœå¤„ç†è‡ªå·±æœ€ä½³æ–‡ç« çš„å¸–åï¼Œå†…å®¹ç›¸å½“è¯¦ç»†ï¼ŒæŽ¨èä¸€è¯»ï¼ […]

proxy:

#13 of 90
2007.08.23

aha, good idea.

Graziano:

#14 of 90
2007.08.24

Very good idea!

Theos:

#15 of 90
2007.08.24

Nice feature.
Small potato with that diet you’re not gonna leave long.

MB Web Design:

#16 of 90
2007.08.24

Outstanding post, thanks for the help

8 Blog Redesign Tips » WPDesigner:

#17 of 90
2007.08.24

[…] Put Content First and Best Content Forward I don’t care where you’re at in your blogging career. You need to put content first. After all, that’s what readers come to your blog for. If you annoy them with too many ads and other useless stuff then they’ll stick with getting your content through a feed reader. If you want to increase uniques and pageviews, put your content first and best content forward. […]

Guinouss:

#18 of 90
2007.08.27

Hi SP,

I don’t get how you get the featured post. I installed Wp-sticky but I cannot separate the “featured” post from the others… I just get the last posts with the annoucement one first, but I would like to separate it from the others… And if it is the last post, I don’t want to see it in “recent posts”… A bit complicated for me… Can you help me ?

Thx SP !

Small Potato:

#19 of 90
2007.08.27

Guinouss - You can’t separate it from the rest of the posts unless you put something in between the feature post and the rest of the post like I have. Keep reading this article to learn how I did that.

Guinouss:

#20 of 90
2007.08.27

Ooopsss… I did not go to the end because I thought that was just for DOMTab….Great post !!

Edison:

#21 of 90
2007.09.01

Hi SP,

1. i found that your top navigation is in this format like http://www.wpdesigner.com/archives/ instead of http://www.wpdesigner.com/?page_id=3, how did you do that?

2. i refer to http://www.ikram-zidane.com/ and i found that he made “RECENT ENTRIES”, “RECENT COMMENTS”, “ARCHIVES” appears in the below of the page, i thought these parts only appear in the sidebar?How to make these parts appears in the below of the page?

3. Please refer to http://www.ikram-zidane.com/ , may i know how to add “QUICKBITS” and “RECOMMENDED” and make them appear in the below of the page too?

thanks SP

Small Potato:

#22 of 90
2007.09.01

1. Go to Options > Permalinks

2. He’s using a custom page template with the functions to call for those stuff to appear in a page instead of in the sidebar. Look on WordPress.org for that tutorial.

3. Same thing as #2.

For other questions, please use the Wpdesigner forums. Thanks Edison.

Edison:

#23 of 90
2007.09.01

Hi SP,

i did,
but i do not have permission to access the page.
Saying that:
This could be due to one of several reasons:

1. Your user account may not have sufficient privileges to access this page. Are you trying to edit someone else’s post, access administrative features or some other privileged system?
2. If you are trying to post, the administrator may have disabled your account, or it may be awaiting activation.

Small Potato:

#24 of 90
2007.09.01

Ok, then you should login as the administrator. If you’re not the administrator then you should get that person to do it. For more help about on this, please post at the forums.

Edison:

#25 of 90
2007.09.02

yeah,
i have tried, but i can’t even post or leave a single message>.

Mike:

#26 of 90
2007.09.23

Great post….the tips really helps.

Koen:

#27 of 90
2007.10.04

Great article, too bad you didn’t made a plugin out of it However, I guess I’ll be following this tutorial soon.

I came here from ProBlogger btw, I was checking out his DOMTab thingy, and decided to find an article on how to do this

Keep it up!

Another Way To Draw Attention To Your Best Posts:

#28 of 90
2007.11.21

[…] can be done using DOMTab. There are instructions on the site on how to use it or you could read this post by Small Potato. The one problem I have noticed about DOMTab is that it will list all the […]

zParcaha:

#29 of 90
2007.11.22

Awesome. I’ll try to include DOMTab in my blog posts. Thanks for the tips.

ket:

#30 of 90
2007.12.17

If these codes help me understand your JWM theme better. I wonder. I’m making it look unique by changing layout and put around posts with round corner border. It yields out in two different results: if it looks good on IE it looks terrible on Firefox; if it looks decent on Firefox it looks ugly on IE.

I turn your site upside down for solution and I reach only this post … sigh…

ikram_zidane:

#31 of 90
2008.01.14

3. Same thing as #2.

Nope, thats not it.

its the blogroll..

here’s the tutorials - http://ikram-zidane.com/?p=151

Small Potato:

#32 of 90
2008.01.14

Thanks for clearing that up ikram. Without knowing you actually used. That was the safest assumption.

slashpix:

#33 of 90
2008.01.26

I want to use your theme - wpdesigner7 on my blog and introduce this feature. However it doesn’t work for me…. More specifically two rows of links.

Can you give me the exact code, if I want this mode to be displayed like on the image.

Thanks in advance, waiting with anticipation hearing form you,

Slashpix

Small Potato:

#34 of 90
2008.01.26

slashpix - i don’t have that version of wpdesigner7 anymore.

slashpix:

#35 of 90
2008.01.27

Yeah. I can see that….

Is there any way you can provide me with the code you used on the image?

I would really appreciate it,

Slashpix

Small Potato:

#36 of 90
2008.01.27

You can duplicate the UL to /UL section and make each set of unordered list float left (next to each other). That’s how I did it.

hd-J:

#37 of 90
2008.02.26

Hi!

I have got one question concerning this plugin. I would like to use it on a static page instead of the blog index. Is it possible?

WordPress Guide - Customizing WordPress Theme Part 3 | WordPress Web 2.0 Spot-Er:

#38 of 90
2008.03.04

[…] the new tabbed content properly. I’m not a theme designer so I have borrowed the code from WPDesigner and simply adopted it to my […]

CH Web Deisgn:

#39 of 90
2008.04.10

I’ve used the WP-Sticky Plugin quite a bit now and it’s definately a fantastic tool. The other suggestions are great i’ll give them a go thank for the info

Ken:

#40 of 90
2008.04.21

Thanks for sharing this. I’m new to blogging and has always wondering how to make some articles static, on the front page, now I know

Worldwide Brands:

#41 of 90
2008.05.01

Thanks for the heads-up about the WP-Sticky Plugin… will have to check that out!

Andy:

#42 of 90
2008.05.02

Hi Guys,
we are running an “Article Writing Contest”
$600 worth prizes to give away.
Please check the link below to participate in the contest …

http://blogs.qualitybusinesslinks.com/

Just 1 article and you can win $$$
We hope to see your article entries soon ..
Good Luck.
-Andy

DazzleCat:

#43 of 90
2008.05.12

def gonna check that plugin out right now thanks

??????? ??? ???? » ITbananas:

#44 of 90
2008.06.14

[…] ??? ????? ??????? ?????? ?????? ????? ?????. ??? ????? ?????? ???????? ????? ?????. ??? ????? ???? ?? ?????? ????. ??? ????? ???? ??????. ??? ????? ?????’??? |????. ??? ?????? ??????? ??????. […]

???? ????? ???? » ITbananas:

#45 of 90
2008.06.14

[…] ???? ?? ????? ???, ???? ????? ? […]

40+ Most Wanted Wordpress Tricks and Hacks:

#46 of 90
2008.06.15

[…] How to Put Your Best Content Forward […]

40+ Most Wanted Wordpress Tricks and Hacks | ???? - ???????? - Best Articles of the Day:

#47 of 90
2008.06.15

[…] How to Put Your Best Content Forward […]

30???Wordpress??:

#48 of 90
2008.06.16

[…] 26?????????? […]

30???Wordpress?? | Yansen's Blog:

#49 of 90
2008.06.16

[…] 26?????????? […]

30???Wordpress?? | ????:

#50 of 90
2008.06.16

[…] 26?????????? […]

???? » Blog Archive » 30???Wordpress??:

#51 of 90
2008.06.16

[…] 26?????????? […]

WP.ORG.CN | 30????Wordpress??:

#52 of 90
2008.06.16

[…] 26?????????? […]

?????–51dzz.com » 30???Wordpress??:

#53 of 90
2008.06.17

[…] 26?????????? […]

PP BLOG# » Blog Archive » 30???Wordpress??:

#54 of 90
2008.06.18

[…] 26?????????? […]

9??? » 40+ Most Wanted Wordpress Tricks and Hacks:

#55 of 90
2008.06.18

[…] How to Put Your Best Content Forward […]

30???Wordpress?? - ???????:

#56 of 90
2008.06.19

[…] 26?????????? […]

Locjan:

#57 of 90
2008.06.22

all i need i get in this site. great thanks again i need this plugin but dont know where to find but finally you found it

40 consejos y trucos para Wordpress | aNieto2K:

#58 of 90
2008.06.23

[…] Pon tu mejor contenido […]

40 ????? ?????????????? ????????/????? ??? WordPress:

#59 of 90
2008.06.23

[…] ??? ????????? ???? ?????? ?????? ?? ???????? ???? […]

Mas de 40 trucos y hackeos para Wordpress | Pboza:

#60 of 90
2008.06.24

[…] Cómo poner tu mejor contenido delante. Una forma de evitar que los mejores contenidos se pierdan en los […]

40+ Most Wanted WordPress Tricks and Hacks | Blogging Tips:

#61 of 90
2008.06.26

[…] How to Put Your Best Content Forward […]

IBM T41:

#62 of 90
2008.06.28

Sklep komputerowy Warszawa IBM

40 Consejos para optimizar tu Wordpress » Comenta o Muere | Actualidad, Humor, Tecnología, Política, Ciencia, Música… y otros muchos temas de los que merece la pena hablar.:

#63 of 90
2008.06.30

[…] Pon tu mejor contenido […]

vsFish » 30???Wordpress??:

#64 of 90
2008.07.02

[…] 26?????????? […]

???? » Blog Archive » 30???Wordpress??:

#65 of 90
2008.07.08

[…] 26?????????? […]

30????WordPress?? | ????--????|????|????|????|WordPress??:

#66 of 90
2008.07.09

[…] 26?????????? […]

Belajar SEO learn:

#67 of 90
2008.07.10

very informative and usefull plugin sticky for important links and not just popular links we can appear for sticky post. thanks for the info.

first time drop here…

30????Wordpress??????????? | abe design studio:

#68 of 90
2008.07.10

[…] 26?????????? […]

Table Of Contents Of Wordpress Tutorials, Helps, Tips and Tricks by aComment.net:

#69 of 90
2008.07.14

[…] How to Put Your Best Content Forward […]

??? » 40????Wordpress?????:

#70 of 90
2008.07.15

[…] How to Put Your Best Content Forward […]

Los 40 trucos mas importantes de Wordpress « Camyna.com:

#71 of 90
2008.07.17

[…] Pon tu mejor contenido […]

???????30???Wordpress?? | Idiigo.com:

#72 of 90
2008.07.18

[…] 26?????????? […]

5 Tabbed Interfaces To Display Your Content In:

#73 of 90
2008.07.30

[…] How to Put Your Best Content Forward by Small Potato […]

WordPress ????40+?????????? - WordPress???:

#74 of 90
2008.08.01

[…] 36. How to Put Your Best Content Forward […]

25 Brilliant WordPress Tips, Tricks and Plugins to Make Your Blog Stand Out | Oragle:

#75 of 90
2008.08.05

[…] 4. Display Your Best Posts This definitely won’t let your awesome posts which could get you valuable traffic get stuck in the archives. The archives are a dark, mysterious place. The archives normally end up with thousands of posts, hundreds of dates to go through and more. Homepage […]

30???Wordpress?? | T.E.M.P:

#76 of 90
2008.08.13

[…] 26?????????? […]

30?Wordpress?? | ??°CLEVER8:

#77 of 90
2008.08.21

[…] 26?????????? […]

40 ?????? ????? ??? Wordpress | Listeria.ru:

#78 of 90
2008.08.21

[…] ??? ?? ???????? ?????? ??????? ? ??????? […]

RCDM » Blog Archive » 40 consejos y trucos para Wordpress (muy interesante):

#79 of 90
2008.08.25

[…] Pon tu mejor contenido […]

Redbots » 30????Wordpress??:

#80 of 90
2008.08.25

[…] 26?????????? […]

WordPress ????40+? : ?1981?2??????:

#81 of 90
2008.08.30

[…] 36. How to Put Your Best Content Forward […]

WordPress ????40+? - ?1981?2??????:

#82 of 90
2008.09.01

[…] 36. How to Put Your Best Content Forward […]

montreal apparel:

#83 of 90
2008.09.05

Thanks very much for providing such a great tutorial on this.I will try DOMTab in my blogs.
thanks

jeans and denim:

#84 of 90
2008.09.08

Thanks very much for providing such a great tutorial on this.I will try DOMTab in my new cheap designer jeans.

km:

#85 of 90
2008.09.10

Any sample code allow us to download and putting on your wordpress theme

Anh dep:

#86 of 90
2008.09.13

Wonderful post, many thanks.

Jane:

#87 of 90
2008.10.03

Good Idea

Synergy Informatics:

#88 of 90
2008.10.05

Hi,

Its really useful…

I’ll do it for few of our clients using wordpress to release articles…

Thanks for this.

Regards
Synergy Informatics
Get Business Hosting at Budget Price.

Gren corner:

#89 of 90
2008.10.10

Display Your Best Posts This definitely won’t let your awesome posts which could get you valuable traffic get stuck in the archives. The archives are a dark, mysterious place. The archives normally end up with thousands of posts, hundreds of dates to go through and more. Homepage

30???Wordpress??:

#90 of 90
2008.10.11

[…] 26?????????? […]

Comment Policy

Theme support questions should be posted at the support forums.
Name and Email are required. Email is never published.
You grant this site perpetual license to reproduce your words and name/website in attribution.
Inappropriate comments will be removed at my discretion.

How to Put Your Best Content Forward

First Method: WP-Sticky Plugin

Second Method: DOMTab

Placement of Best Content

How to use DOMTab

As icing on the cake, here’s how I made the “Best of” section show up under the first post on the home page.

Club Statistics

Categories

Author