HowTo – Using Post ID To CSS Style WordPress Content

Filed under: Wordpress Tips —

wordpress-logoMany people want to use WordPress as a CMS to allow the management of a business website that may have a few dozen pages but does not generally include a daily blog… or that may include a blog as a secondary resource.

This is relatively easy to do by simply using Pages for your content and generating a menu system your visitors can use to find the content on your site.

When you begin designing the frontend of the site you will also want to make use of a home.php page to show content blocks from your pages and you can include custom fields within your page editor to act as a leader or excerpt.

It is possible to style these page blocks by including the “WordPress Page ID” in the class or id and then adding a reference to that id in your styles.css file to control the content.

This option can be used creatively in other places on your site and it is not limited to WordPress Pages …. Posts can also make use of the ID.

So there is no confusion the Post ID is the Database number of the page and would be displayed in your urls if you were not using Permalinks.

To make use of the ID you must call it within your loop.

Here we will CSS Style a specific Pages Permalink on the front page to make it standout from the rest.

[php]
<h2 class="permalink" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
</h2>
[/php]

As you can see from the code above the main element for the permalink is the H2 Headline Tag and within that you can see that we have given the H2 Element the Class of “permalink” and then we follow that up with a CSS id of post-IDNUMBER

by doing this you can apply standard formatting that is shared with the class permalink and then you can single out the individual page content with the css id.

This option can be applied in other places within your site such as your single.php, page.php or category templates.

Remember you can get very creative because php is available for analyzing the number that is returned.

You could colorize od numbered pages or those within a specific range.

This is NOT an every other option for stylizing category pages that return a group of posts because you could delete posts which can throw off your display.