• 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 - 16 through 30 (of 33 total)
  • Can i see the complete code from the page you’re adding this code into?

    If that’s ok then paste the code into a pastebin and post the link to it here.

    https://wordpress.pastebin.com/

    I did test the code i posted, it worked without any repeating issue.. i see the problem clearly on your site though…

    Thread Starter thescribbler

    (@thescribbler)

    Hi t31os,

    Sorry about the delay. Cheers for all the help. Here’s the link: https://wordpress.pastebin.com/m695ea294 It’s the “categories” div.

    Looking at it… bear with me.. ??

    Is this on a site where you can safely plonk in test code without fear of users seeing it?

    The problem at the moment is you’re referencing functions and variables outside the scope of that page, so it’s hard to say what should be happening, and to have an idea of what’s in those variables or functions..

    Any chance i can see the functions file? ..

    Or alternatively if you can point at the particular theme you’re using?

    Don’t worry i think i have it figured out.. ;)…

    Bear with me.. ??

    EDIT: I see the response on Nathans forum .. (won’t post the link)

    I’ll have a a few simple lines of code for you to use in a few moments, surpised Nathan didn’t do this a freebie, it’s going to be dead simple..

    Ok don’t let the fact that i moved code around deceive you, it’s actually a very small update to the code, i’m just picky when it comes to the formatting… lol

    https://wordpress.pastebin.com/f41bd26fa

    See how that works out for you…

    If that works ok, the next step is the CSS…

    #categories h2.catname {
    
    }
    #categories h2.anothercatname {
    
    }

    And so on… i’m sure you get the point…

    I’ve commented out some alternative options for the cat title, you’ll see what i mean when you look at the code, just uncomment the bit you want, and leave the other 2 commented out… ??

    Of course note, depending which option you use will depend on the how the category names are to be referenced in the CSS…

    I might actually give you a small update to the above, but test the code first please.. ?? we’ll go from there.. ??

    Thread Starter thescribbler

    (@thescribbler)

    Hey t31os_

    Thanks for all the effort you’re putting in!
    I replaced the home.php with your modified version – the latest stories category is still present but the other categories have been replaced with the text ‘<a href=”‘. To see if the CSS would affect the latest stories heading I put #categories h2.latest-stories {
    color: #FFFFFF;
    text-size: 30px;
    }
    into the custom stylesheet but it didn’t effect any change (obviously there’s a strong chance I’ve not constructed the CSS syntax correctly!!) Once again, thanks for all your effort – exchanges like this restore one’s faith in the kindness of strangers!

    From the above if you change..
    $the_cat = $post_by_cat[$catcount];

    to..
    $the_cat = $post_by_cat;

    Doe that then help?..

    I see the problem… it’s because i had to make an assumption regarding the data in $wp_theme_options['post_by_cat'] , i assumed i’d need to increment and move through the array, but perhaps not…

    In turn this created a problem with $the_cat_link = get_category_link( $the_cat);

    Try the above change and if that helps i’ll update the code to reflect that change (remove the counter i added, rework other bits etc)…

    Don’t worry about the CSS, deal with that last, i just need to make sure the code functions first…

    If you don’t get errors on the page then view source and see if the <h2> elements now look like this.. <h2 class="somecatname">

    Thread Starter thescribbler

    (@thescribbler)

    Hey t31os_,

    I made that change to the code and the page has gone back to normal!

    The source code is showing: <h2 class=”Latest Stories”>Latest Stories</h2>

    There we go, that did help… ?? Maybe i was over-thinking the process before.. ??

    The class is as we were aiming for…

    I’ll tidy up the un-required bits etc.. bear with me a few minutes..

    Here try this, added the change, removed un-needed count, and put some comments in…

    https://wordpress.pastebin.com/faa6af1a

    You should then end up with classes like this in the source…
    class="category-name"

    Spaces will be replaced by hyphens for class names…

    So for example if a category is called “WordPress Blogs”, the class would be… (while the title is capitalised for display)
    h2.wordpress-blogs

    Check the source code though, and make sure that’s what is now happening.. ??

    Thread Starter thescribbler

    (@thescribbler)

    Hi,

    That code caused a 500 error page. I’ve put your other code back in which looks good – the source code is as you said it should be. It’s now showing separate classes for each heading.

    Not sure why you get an internal server error…

    Compare the two versions, and you should be able to see what i’ve changed..

    I’ve just noticed you have slashes in a category name, that may cause a problem, and i think the code needs another update…

    Can you just test something for me, can you just see if the page errors with this code…

    https://wordpress.pastebin.com/f10fc2a9d

    That’s void of any title and class stuff, i just want to see if there’s a problem with anything else in the code… this is the quickest to see if that’s the case…

    If you receive any PHP errors, please copy and paste that here…

    Thread Starter thescribbler

    (@thescribbler)

    That page has loaded fine – just without any headings. Apart from that it looks fine…

    I just noticed the error with the previous code..

    $catClass       = str_replace(' ','-',$catClass));

    Should be

    $catClass       = str_replace(' ','-',$catClass);

    Go back to this..
    https://wordpress.pastebin.com/faa6af1a

    Just make the change mentioned above…

    Does that work?

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