I want to add a class to my css if a category is displayed but I can't get it to work.
I added this to my header:
if ( is_category('areas')) { echo ' class="myclass" '; }
I want to add this class to my stylesheet to any page in this category so It changes the look of any page in that category. It isn't working though.
Ive read through a lot of the codex and this is all I can figure to do
Any suggestions?
Probably easiest to up WP's bodyclass; that will put in all the body classes you will need. With
<body <?php body_class(); ?>>
in header.php, it will output something like
<body class="archive category category-my-category-name category-1 logged-in">
The call that class in CSS, i.e.
body.category-my-category-name #my-div {background-color:#fff;}
See http://codex.wordpress.org/Function_Reference/body_class
Related
I've hunted high and low how to move reviews tab and bring it below product description.
How can this be done with CSS or plugin?
And reviews will be shown 25 at once with read more button that opens another 25 reviews.
Woocommerce uses jQuery (Javascript) to put reviews and content descriptions in separate tabs.
In this tutorial I use Javascript to put wordpress comments below the content after page loading has finished. For this do fast as I did in my wordpress sample page.
Go to header.php file in your themes, edit <body> tag to include <body> tag onload="myFunctiondf()" then it looks like below :
<body onload="myFunctiondf()">
or if you have class in your theme looks like this :
<body <?php body_class(); ?> onload="myFunctiondf()">
Now go to footer.php, include this code before </body> which looks like this:
<script>
function myFunctiondf() {
document.getElementById("tab-reviews").style.display="block";
document.getElementById("tab-description").style.display="block";
document.getElementById("tab-title-reviews").style.display="none";
document.getElementById("tab-title-description").style.display="none";
}
</script>
</body>
Congratulation from now your product pages works as mine.
The following link from the WooCommerce docs should help you: https://docs.woocommerce.com/document/editing-product-data-tabs/
Re-ordering Tabs:
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {
$tabs['reviews']['priority'] = 5; // Reviews first
$tabs['description']['priority'] = 10; // Description second
$tabs['additional_information']['priority'] = 15; // Additional information third
return $tabs;
}
This is what I need to do:
To target only the main shop page with CSS (a specific custom class I created as mentioned below).
This is what I've done and tried so far:
I have an override template of archive-product.php in my child theme.
In this override template I've added a div with a custom class custom-shop-class just before the product loop start, because I want to target the looped products specifically.
I tried targeting with class page-id-4 because if I hover over the "shop" page in wp-admin, it gave me http://.../post.php?post=4&action=edit
The problem I'm having is as follows:
From what I've discovered is that the same archive-product.php template is being used in the other various shop pages and not only in the main "shop" page (correct me if I'm wrong), so when I target my custom-shop-class with CSS, it affects all the other shop pages using the same template file, and it must not.
There is no unique identifier or class specifically for the shop page, something like the page-id-?? class in the body tag (as in the usual WP pages).
Any suggestions on the best method/solution?
Set a conditional statement to check for the primary shop page, then echo the div in question if that statement evaluates to true.
WooCommerce Conditional Tag for main shop page:
is_shop()
Example
if (is_shop()) {
echo "<div class='custom-shop-class'></div>";
} else {
echo "<div class='custom-product-category-class'></div>";
}
Alternatively:
<?php if (is_shop()):?>
<div class="custom-shop-class"></div>
<?php else: ?>
<div class="custom-product-category-class"></div>
<?php endif;?>
Conditional Tags | WooThemes Documentation
Using the filter body_class with the is_shop conditional you can target the main WooCommerce shop page.
add_filter( 'body_class', 'woo_shop_class' );
// Add WooCommerce Shop Page CSS Class
function woo_shop_class( $classes ) {
if ( is_shop() ) // Set conditional
$classes[] = 'woo-shop'; // Add Class
return $classes;
}
The code goes in your themes functions.php file.
To build on the answer provided here, how might I go further and add a unique identifier to the shop page based on the active WPML language? (I'm basically trying to reduce a font size on the German version of the shop page only - it's proving surprisingly difficult to do)
The problem is that all the pages have a content_container of a set width of 1056px and I want all pages to have the 1056px set width except for the home page in which I need a content container that spans over the whole page from left to right.
Look at the CSS class on the BODY tag that WP uses on either page. Write your own CSS targeting the page you want.
add a class to the body of all the files (index.php and page.php) like this:
<body <?php body_class(); ?>>
and then target the home page with css:
body.home #content_container{width:100%; !important}
#content_container{width:1056px;}
You can do it like this also:
<?php
if ( is_home() ) {
//This is Home page
echo '<div id="content_container_wide">';
}
else {
// This is not a homepage
echo '<div id="content_container">';
}
?>
I'm second day into Drupal and pretty confused... I need to add an unique class name to the body tag to identify each page as there are many unique styling (to repeating elements) on each page across the site.
I've found a couple of code snippets online but they haven't worked. For example I've added this into the template.php file, but it doesn't work:
function testtheme_preprocess_html(&$vars) { // my theme is called "testtheme"
$path = drupal_get_path_alias($_GET['q']);
$aliases = explode('/', $path);
foreach($aliases as $alias) {
$vars['classes_array'][] = drupal_clean_css_identifier($alias);
}
}
It's suppose to add a class to the body tag but nothing is showing up for me. Am I missing something or can someone provide another solution?
The answer of Rainfall is true but :
There are already unique class by page in drupal in body element page-NAMEPAGE
Sorry if I didn't understand you right, but you can add code to the body tag in your html.tpl.php file to make it look this way:
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
And that's all. After that your body tag will automatic have css classes according to the page . Also you'll have info about node type, info about if user logged in, node id.
Let me know if it works or if I made some mistake.
Thanks and good luck!
You can modify https://www.drupal.org/project/node_class module:
1) comment function node_class_preprocess_node in node_class.module
2) insert
$node_classes = node_class($node);
if (!empty($node_classes)) $node_classes .= ' ';
$content_column_class = str_replace(' class="','', $content_column_class);
$content_column_class = ' class="'. $node_classes . $content_column_class;
in page.tpl.php
before
<section<?php print $content_column_class; ?> id="content_col">
How can I trace all the relevant tags of a page in the form of classes to the <body> tag? I'm referring to how Wordpress puts the following in a page's body class attribute:
home page page-id-12766 page-template page-template-page-home-php cufon2-disabled safari theme-*
This could be extremely helpful in Joomla template development.
Thanks in advance.
I don't know whether there is any out of the box solutions exists for this. As the main structure of the site is mainly based on the Menu structure, the below snippet may be useful. This is used in the templates/mytemplate/index.php file.
<?php
$menu = &JSite::getMenu();
$active = $menu->getActive();
$pageclass= '' ;
//$currentpage = ''; //In case if wanted to get the alias of the current page in a later stage.
if( count($active->tree) > 0 ) {
foreach ($active->tree as $key => $value) {
$pageclass .= 'level-'.$key . ' pageid-'.$value. ' page-'.$menu->getItem($value)->alias ;
//$currentpage = $menu->getItem($value)->alias;
}
}
?>
<body class="<?php echo $pageclass; ?>">
This will output something like:
<body class="level-0 pageid-101 page-home">
You may improve this using various values available in the $active variable.
Here's some information on the Body Class Function
How Wordpress determines which classes to apply using it is found in post-template.php
The relevant function you're looking for is get_body_class within this template. It essentially runs a series of checks to determine if the current page meets the criteria for given classes. It also relies heavily on Wordpress specific function calls that helps make that determination.