ButlerBlog

chad butler's weblog

  • About
  • Blog
  • WordPress Plugins
  • Contact

Displaying one category differently from all others in the WordPress loop

By Chad Butler 1 Comment

One of the categories of my blog is “My Bookmarks.” This is where I add the contents of my del.icio.us bookmarks to my blog to share with others. However, since these are not really “posts” for the blog, I set them apart using a different style within the WordPress loop. This is a tutorial of how to set that up.

First, one must understand “The Loop.” Here is how WordPress defines The Loop:

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags.

The Loop begins with the following code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

and ends with:

<?php endif; ?>

Everything in between is how WordPress displays your posts. There are certain tags and WordPress functions that can be used within the loop. We will be using the function in_category().

We will also need to know the ID of the category that will be displayed differently. This can easily be obtained by going to the WordPress admin and selecting Manage > Categories. Then find the ID in the leftmost column. My Bookmarks happens to be ID 13, so that will be used in the example.

I will assume that reader does not know php. If you do, this part will be rudimentary. In order to display Category My Bookmarks (13) differently from all others, we will use what is known as a conditional statement. This means if this is true, do this, otherwise do something else. This is done in php with the following:

<?php if (this condition is true) {

do this

} else {

do this

} ?>

Our condition is to know if we are in the category My Bookmarks and then display differently. Everything else is the same. Your primary display then is the “else” condition. Look at your theme’s index.php (or your theme might use home.php) and select everything between the following:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

This is going to be the else condition
<?php endwhile; else: ?>

Make note of this. Just after line that begins the loop (if(have_posts())…), you are going to put in a new line to test for our condition of category My Bookmarks (13), change the number 13 to whatever the ID is of the category you are displaying differently:

<?php if (in_category(13)) { ?>

Now you may put whatever you like. As an example, I have displayed how mine is set up:

<div class=”delicious”>
<h4>From my bookmarks:</h4>
<?php the_content(__(‘Read more &raquo;’));?><div style=”clear:both;”>
<p class=”more”><a href=”/category/web/my-bookmarks/”>View my other bookmarks here.</a></p>
</div>
</div>

Notice I have defined a specific class to style this, and have added those CSS definitions to my stylesheet. I have eliminated various post details and the post title, choosing to display all with the title “From My Bookmarks” followed by the content of the post which is put out with the_content(). The last part provides a link to the category archive.

This will be followed by closing our condition of being in the category My Bookmarks and if that is not true, then all others would be displayed using the block we already have. So to close this condition, add the following:

<?php } else { ?>

This should go just before your existing output that we discussed earlier. Leave your original output intact and all other categories will be displayed using that. At the end of this we need to close our new conditional statement. Go to the following line:

<?php endwhile; else: ?>

And just before that put a new line to close our new conditional block:

<?php } ?>

That’s it! Now all of the posts in the category My Bookmarks (or whatever you choose) will display using a special style, and all others will use our themes “standard” style.

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print
  • More
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on Reddit (Opens in new window) Reddit
  • Click to share on Tumblr (Opens in new window) Tumblr
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to share on Pinterest (Opens in new window) Pinterest

Filed Under: WordPress Tagged With: tips, tutorials, WordPress

Lightweight XML and RSS Feed Buttons Using CSS

By Chad Butler Leave a Comment

I can’t claim that this is a completely original idea. I’m certain that somewhere out there someone has come up with the same idea (probably several someones). Here is my way of creating lightweight XML/RSS Feed buttons using only CSS.

The goals in this project were:

  1. Create an XML/RSS feed button without an image file
  2. Use only CSS
  3. Have the end result be smaller in file size than using an image
  4. Be able to have the end result load with the page instead of an extra file

I began by actually downloading an XML button image: xmlrssfeed.gif. The file size of the image is 429 bytes and using an image editor to sample the exact colors of the background and the borders. The colors were as follows:

  • #FF6600 – background
  • #FFC8A4 – border top
  • #7D3302 – border right
  • #3F1A01 – border bottom
  • #FF9A57 – border left

Arial will do fine for the font, and it was obviously bold weight, white in color, and 11 pixels. The image size was 36 x 14.

With this information, I assembled the following CSS to get this button:

XML

 

.cssbutton {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #FF6600;
    height: 14px;
    width: 36px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FFC8A4;
    border-right-color: #7D3302;
    border-bottom-color: #3F1A01;
    border-left-color: #FF9A57;
}

The above CSS is 602 bytes, so at this point, we’re actually heavier than the image itself. Since the goal here is to create a button of shear microscopic file size, every byte matters. So I went through this original CSS and reduced what is redundant, combined what could be combined, eliminated white-space, and used short-cuts when possible. This reduction yields the same result:

XML

 

.cb{
    font:11px Arial,sans-serif;
    font-weight:bold;
    color:#fff;
    background-color:#f60;
    height:14px;
    width:36px;
    text-align:center;
    border:1px solid;
    border-color:#FFC8A4 #7D3302 #3F1A01 #FF9A57;
}

This gets us to 241 bytes, almost half of the size of the image file. That certainly qualifies as an improvement. But we can do better. The above does contain carriage returns and tabs for easy comparison to the original. Eliminating those extra bytes gets the size down to 185 bytes. Now we’re talking.

(Note: From here on, the file sizes do not include carriage returns. However, to make them easier to read in this column, I have displayed them with carriage returns. Running the CSS on a single line with no whitespace improves the file size considerably.)

Further size reduction is certainly possible if you are willing to give up the shading effect of the borders. Here’s an example:

XML

 

This reduces the size to 147 bytes:

.cb{
    font:11px Arial,sans-serif;
    font-weight:bold;
    color:#fff;
    background-color:#f60;
    height:14px;
    width:36px;
    text-align:center;
    border:1px solid#7D3302;
}

Or eliminate the border all together and we get it down to 123 bytes, 28% the size of the image file:

XML

 

.cb{
    font:11px Arial,sans-serif;
    font-weight:bold;
    color:#fff;
    background-color:#f60;
    height:14px;
    width:36px;
    text-align:center;
}

For my money, I like the extra colors on the borders. It makes the text look like the image file and we are still improving the size by almost a 50% reduction.

One thing to remember is that your mileage may vary. In a perfect test environment, such as an HTML file with just these examples and no other CSS, the above code is all we needed. However, to display the examples in this post, I had to add some extra properties to the CSS to overcome the inherited properties of the rest of my page.

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print
  • More
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on Reddit (Opens in new window) Reddit
  • Click to share on Tumblr (Opens in new window) Tumblr
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to share on Pinterest (Opens in new window) Pinterest

Filed Under: Web Tagged With: css, webdev

Stylegala

By Chad Butler Leave a Comment

Stylegala

Stylegala is an online resource and inspiration guide for web agencies, designers and developers who take interest in websites that combine the powers of design, web standards and CSS

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print
  • More
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on Reddit (Opens in new window) Reddit
  • Click to share on Tumblr (Opens in new window) Tumblr
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to share on Pinterest (Opens in new window) Pinterest

Filed Under: My Bookmarks

  • « Previous Page
  • 1
  • …
  • 66
  • 67
  • 68
  • 69
  • 70
  • …
  • 109
  • Next Page »

Join Us!

I will never share your information. No spam. No junk. No kidding. Unsubscribe anytime.

Recent Posts:

  • The High Price of Free Plugins
  • YouTube Success: Key Tips for Enhancing Video Optimization and Visibility
  • Mobile App vs. Mobile Website Ideal Choice for your Business
  • Top Strategies to Boost Your Brand’s Visibility and Impact
  • Advanced Blogging Strategies: Using Analytics, A/B Testing, and Conversion Optimization Techniques to Grow Your Audience
  • Unlock Real-Time Process Insights to Save Time and Money
  • How Writers Can Attract More Audience Attention
  • Dress for Success – Even at Home
  • Mastering the Art of Crafting SMART Marketing Goals
  • Rediscover Your Brand Story: 7 Tips for Refreshing Your Company Identity

Archives

  • About
  • Blog
  • Archive
  • Contact

Site powered by WordPress, running on the Genesis Framework from StudioPress.

Unless otherwise noted, content on this site is © 2006-2025 ButlerBlog and may not be reproduced without express written permission from the author.

Some content may include affiliate links for which this site receives a small commission.