I'm kinda new to Wordpress and CSS, I hope you guys can help me out.
I want to change the position of the sitelogo .site-branding of all the posts under a specific category.
I can change the site-branding in my style.css to my liking but it effects the whole site including all pages, posts and category's.
.site-branding {
left: 50%;
position: absolute;
top: 40%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Hope you guys can help me out.
Thanks in advance.
WordPress gives you the ability to target the category by adding its name to your stylesheet (usually "category-x") and then you can uniquely target any and all categories in your css.
Here's a great step by step article for targeting this class in your css.
An example might be:
<body class="archive category category-agriculture category-40">
With category-agriculture being the class you want to target like so:
body.category-agriculture .site-branding {color: red;}
Thanks for the effort, but I have had a little help and fixed the problem.
I added this filter to my functions.php
function pn_body_class_add_categories( $classes ) {
// Only proceed if we're on a single post page
if ( !is_single() )
return $classes;
// Get the categories that are assigned to this post
$post_categories = get_the_category();
// Loop over each category in the $categories array
foreach( $post_categories as $current_category ) {
// Add the current category's slug to the $body_classes array
$classes[] = 'category-' . $current_category->slug;
}
// Finally, return the $body_classes array
return $classes;
}
add_filter( 'body_class', 'pn_body_class_add_categories' );
That filter will add the category name as a class to the body on single posts.
For example, if the category is called News, it will add category-news to the body as a class on single posts.
Once that’s done, you can use that body class to only target .site-branding on single posts in the News category like this:
.single.category-news .site-branding {
left: 20%;
}
You will likely need Javascript and Jquery for this.
So if this is your URL structure: www.mysite.com/home/category/,
(function($){
var $pathArray = window.location.pathname.split('/');
var $location = pathArray[2]
var $branding = $(".site-branding")
if ($location == 'cat1' || $location == 'cat2') {
$branding.css({
'left' : '50%',
'position' : 'absolute',
'top' : '40%',
'-webkit-transform' : 'translate(-50%, -50%)',
'-ms-transform' : 'translate(-50%, -50%)',
'transform' : 'translate(-50%, -50%)'
});
}
});
Assuming you are running a child theme on your wordpress instance (which if you are not, you definitely should) you can add this script at the bottom of your header.php file.
For that I think you will have to add a PHP conditional in your header.php that checks if the current post is in that specific category, and then add another class to your logo tag that changes it's position.
Would be something like this:
<h1 class="site-branding <?php in_array( YOUR_CATEGORY_ID, get_the_category((get_the_ID()) ) ? ' new-posision' : '' ; ?>"></h1>
Wordpress may add category as a class to body tag.
If it is so for your theme than you may add specific css rule for category.
.category .site-branding {
/* your css rules here */
}
