Posted 2 years ago #
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! http://www.theyeattheiryoung.net
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] }
Posted 2 years ago #
Wouldn't that be...
.home .h2 {[ some styling] }
:-|
;)
Posted 2 years ago #
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!
Posted 2 years ago #
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.
Posted 2 years ago #
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.
Posted 2 years ago #
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?
Posted 2 years ago #
I have this problem as well http://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
Posted 2 years ago #
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...
Posted 2 years ago #
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>
Posted 2 years ago #
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...
Posted 2 years ago #
^ use t31os_'s php as it's much safer.
Can you style the css from there, scribbler?
Posted 2 years ago #
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 ....
Posted 2 years ago #
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!!
Posted 2 years ago #
So basically you just need the code to ignore the latest stories category and look to the next category? Is that right?
Posted 2 years ago #
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.
Posted 2 years ago #
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.
http://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...
Posted 2 years ago #
Hi t31os,
Sorry about the delay. Cheers for all the help. Here's the link: http://wordpress.pastebin.com/m695ea294 It's the "categories" div.
Posted 2 years ago #
Looking at it... bear with me.. ;)
Posted 2 years ago #
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?
Posted 2 years ago #
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..
Posted 2 years ago #
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
http://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.. ;)
Posted 2 years ago #
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!
Posted 2 years ago #
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">
Posted 2 years ago #
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>
Posted 2 years ago #
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..
Posted 2 years ago #
Here try this, added the change, removed un-needed count, and put some comments in...
http://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.. :)
Posted 2 years ago #
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.
Posted 2 years ago #
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...
http://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...
Posted 2 years ago #
That page has loaded fine - just without any headings. Apart from that it looks fine...
This topic has been closed to new replies.
