How to style h2 headings separately?

  • Hi all,

    What CSS code would I need to style the h2 category headings on my home page separately (and exclude some if necessary)? Currently they all fall under a generic h2 style – surely there’s a way to break them down by their ID number??!! It seems like it should be easy but I can’t figure it out at all!! Any help greatly appreciated! Cheers! https://www.theyeattheiryoung.net

Viewing 15 replies - 1 through 15 (of 33 total)

  • Try editing header.php and replacing <body> with

    <body<?php if(is_home()) echo ' class="home"';?>

    You should then by able to style just the h2titles on your home page using:

    .home.h2 {[ some styling] }

    Wouldn’t that be…
    .home .h2 {[ some styling] }

    ??

    ??

    Thread Starter thescribbler

    (@thescribbler)

    Cheers for the help guys! This advice enables me to style the h2 headings on my home page separately from any others, but still as a group. What I’d like to be able to do is style each h2 heading that appears on the home page separately from the other h2 headings on the home page (e.g. Culture (cat=3) has a different style from News (cat=2) etc.). Surely this is possible??!! Thanks again!

    Try this:

    <h2 class="<?php foreach((get_the_category()) as $category) {echo $category->cat_name;} ?>">...</h2>

    This will add the category as a class to each <h2>. Style accordingly.

    Also, I don’t know how familiar you are with css, but let’s assume you have three categories: music, art, video. You want to color the text different for each.

    In your stylesheet, add these lines:

    h2.music {color:red;}

h2.art {color:blue;}

h2.video {color:purple;}

    You’re obviously going to want to change those categories to your own, and the colors to your site’s scheme.

    Wouldn’t that be…
    .home .h2 {[ some styling] }

    ??

    ??

    It’s .home h2 {[ some styling] } without the second period.

    Thread Starter thescribbler

    (@thescribbler)

    Hi Tony,

    Thanks for your reply. I’m just starting out with CSS so my knowledge is limited! I put that line of code in the home.php below the <h2><?php prox_cat_link($post_by_cat); //category title as a link to category archive ?></h2> line. It added additional headings beneath the existing ones, each with the title of “…” Would this be the correct place to input your code?

    I have this problem as well https://www.7seo.co.uk

    I want the Menu to appear SEO
    and the Page Heading to appear SEO – Search Engine Optimisation

    <div class="title-page">
<h2><?php the_title(); ?></h2>

    This is my first sortie into coding so be gentle with me.

    All help appreciated

    Thread Starter thescribbler

    (@thescribbler)

    I’m pretty sure it’s about creating some code that allows you to style the headings by cat ID number, but I can’t find anything anywhere on the net! Very frustrating! I’ll keep searching…

    AntonyGray: start a new thread and I’ll have a look. You’ll have better luck that way, in case this thread gets resolved.

    Sorry scribbler, let me try to be more specific.

    Your code as it is now:

    <h2><?php prox_cat_link($post_by_cat); //category title as a link to category archive ?></h2>

    See that first <h2>? What we want to do is give it a class, so we can select it with our css. Replace that <h2> with this:

    <h2 class="<?php foreach((get_the_category()) as $category) {echo $category->cat_name;} ?>">

    So now your code looks like so:

    <h2 class="<?php foreach((get_the_category()) as $category) {echo $category->cat_name;} ?>"><?php prox_cat_link($post_by_cat); //category title as a link to category archive ?></h2>

    What happens when there’s more then one category, you’ll end with a long line of text from all the matched categories as class name..

    This would be fine, grabs the first category, then unsets the unused data..

    <h2 class="<?php $cat = get_the_category(); echo $cat[0]->cat_slug; unset($cat); ?>"><?php prox_cat_link($post_by_cat); //category title as a link to category archive ?></h2>

    Also not sure why you’re doing this…
    <?php prox_cat_link($post_by_cat); //category title as a link to category archive ?>

    There are functions for grabbing a category link… you could do this all like so….

    <?php $cat = get_the_category(); ?>
<h2 class="<?php echo $cat[0]->slug;?>">
	<a href="<?php echo get_category_link($cat[0]->cat_ID);?>">
		<?php echo $cat[0]->cat_name; ?>
	</a>
</h2>
<?php unset($cat); ?>

    Uses the slug for the class name (i don’t know about anyone else but i use very simple slugs, so this seemed an obvious choice – faster then having to “strtolower” etc..)…
    Uses the ID to grab the link used in the link element..
    Uses cat name for the link text…

    Then at the end unsets the data so it’s not floating around…

    ^ use t31os_‘s php as it’s much safer.

    Can you style the css from there, scribbler?

    Of course this all becomes pretty useless if you assign mutliple categories to posts…

    The main issue with the previous code was not using the slug (meaning you need to lowercase the name) if you want to make it easier to style.. and the use of custom functions is really not required in this case…

    Didn’t mean to step on your toes with this one Tony, just thought i might aswell offer up an alternative ….

    Thread Starter thescribbler

    (@thescribbler)

    Hi guys,

    Cheers for all the help!

    Tony: I tried your code and then put h2.latest-stories {color: #FFFFFF;} in my stylesheet but nothing happened. Again, it could be down to my techno-idiocy but I’m sure I followed your instructions correctly!

    t31os: I tried your code but got multiple instances of the same heading dispersed throughout the page – might be because I am assigning multiple categories to posts.

    The way the page works is this: all new posts are categorized as both a latest story and as one other relevant category (culture, sport, news etc.) so all stories start off appearing in the latest stories category and then slide down into their relevant category as new stories are added and push them out. Currently the latest stories heading is a link to the latest stories archive – I want this heading/link hidden because there’s no need for this archive: all the latest stories appear on the home page! Also, I figured different coloured text/border lines for the other headings would help distinguish the categories.

    Once again, cheers for all the input guys!!

    So basically you just need the code to ignore the latest stories category and look to the next category? Is that right?

    Thread Starter thescribbler

    (@thescribbler)

    I need the code to remove the ‘Latest Stories’ text/link from the home page – the two posts in the category remain but the actual text heading/link above them will (hopefully!) disappear. Essentially, I’d like to be able to decide what happens to each heading individually, whether it be to hide them or style them differently from the others.

Viewing 15 replies - 1 through 15 (of 33 total)
  • The topic ‘How to style h2 headings separately?’ is closed to new replies.