• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Tutorial

Custom Category Styles

CMDR Mitchcraft

Reading time: 3 minutes

I had a few people ask me yesterday how I was able to separate the styles on my blog into normal posts and the “asides” post – news from WordPress, etc.  It’s not hard, so I thought I would share it with you.image

First off, you need to make sure that your posts have the dynamic categories that can be assigned by WordPress.  This is done by replacing:

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

with

<div id=”post-<?php the_ID(); ?>”>

WordPress adds in (using post_class) quite a few classes that will allow you target posts with CSS by tag, category, or even post type.  Once this is in, we find out the category name for our post and style it accordingly:

.blog .category-asides{padding: 20px !important;background: #e6e6e6 url(https://mitchcanter.me/wp-content/uploads/2011/02/news-bg.jpg) no-repeat bottom right;position: relative;}

I’ve given it padding, and some background edits (such as a color and background image – the WordPress logo).

Now, I don’t want people to find their way into the single article on these “asides” posts – they have the original source quoted in the story and I’m disabling the ability to click through on the title.  That means we need to change the code in the loop.

Open the index.php file and look for this statement:

<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>

We’re going to use a conditional tag to check which category it’s in.  If it’s in our asides category (in this case, category ID #6) then we use a specific code.  Otherwise, it displays as normal:

<?php if (in_category(‘6’)) { ?><h2><?php the_title(); ?></h2><?php } else { ?><h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2><?php } ?>

Notice the first part contains just the title, while the second contains a hyperlinked title.

One last thing I want to do is to display a link to the original source.  I want people to see quickly that I “reblogged” this from another site and that it’s just a new posting – not original content from me.  So, I used another conditional tag (this one goes right below
<?php the_content(); ?>):

<?php if (in_category(‘6’)) { ?><div class=”newsmeta”><a href=”<?php $key=”source”; echo get_post_meta($post->ID, $key, true); ?>”>Original Source</a></div><?php } else { ?><?php } ?>

See that php code starting with $key? That’s a variable.  Basically, I’m asking WordPress to(for this loop only) assign a value to that variable.  But where am I pulling from?  Why, a custom field, of course!  This allows me to echo the “post_meta” (or custom field) labeled “source”.  In the post editor, I paste in a URL and it puts in a nice link that links to the original article.

I also gave it a bit of formatting to make it look nice:
.newsmeta{position: absolute;right: 50px;bottom: 10px;font-size: 11px;text-align: right;font-style: italic;}

.newsmeta a{font-style: italic;font-size: 10px;}

And that’s it – by separating the content you can make certain categories look and even operate
differently than other posts.

6, e6e6e6
  • The Hidden WordPress Options Panel

    The Hidden WordPress Options Panel

    Reading time: 1 minute

    Did you know that there’s a hidden options panel in WordPress? It’s one page you can visit that will allow you to set every single option available to you on your site – even some of the hidden ones that are set via plugins and/or other functions.

    WordPress
  • Go Update W3 Total Cache, WPTouch, and AddThis RIGHT NOW!

    Go Update W3 Total Cache, WPTouch, and AddThis RIGHT NOW!

    Reading time: 1 minute

    If you’ve updated your plugins in the last 24 hours, go straight back into your website and do it again – there’s a chance you may have downloaded some infected plugins that were hacked into the repository. According to WordPress.org, the plugins AddThis, W3 Total Cache, and WPTouch were infected with a backdoor that lets…

    WordPress