I have a twenty-seventeen child theme, which i want to switch colour scheme per category, (from colors-custom to colors-dark - eventally it will have more color schemes)
but this isn't working
add_filter( 'body_class', function( $classes ) {
if ( is_category( 'x cateorgy' ) )
{
foreach($classes as $key => $class) {
if( $class == "colors-custom" )
{
unset($classes[$key]);
}
}
}
$classes[] = 'colors-dark';
return $classes;
}, 1000);
I've initially tried it with out the first conditional if (is category()) and it adds color-dark but the css doesn't change.
Simply target the body element css classes for specific categories. The twenty seventeen theme uses the body_class() function and outputs class names for everything.
Just write css styles for background colors for every category class.
Related
I am using Woocommerce with WOOF plugin (woocommerce filter). In particular, this plugin can display a filter that will only search in a specific product category using for example [woof taxonomies=product_cat:23] shortcode and display the results using the [woof_products taxonomies=product_cat:23] shortcode, where 23 is the category id of goods.
However, it is not always possible to specify a category in the shortcode itself, and I would like to implement functionality that allows you to use a shortcode like [woof taxonomies=product_cat:auto], which will automatically determine the current category using a specific function, for example, this (the function is tested and works):
function show_product_category_id() {
$cat = get_queried_object();
$catID = $cat->term_id;
if (empty($catID)) {
//
if (strpos($_GET['really_curr_tax'], 'product_cat')) {
$catID=str_replace('-product_cat', '', $_GET['really_curr_tax']);
}
else {}
}
else {}
echo $catID;
}
I can, of course, create a shortcode for this function, and add it to the theme's functions.php:
add_shortcode( 'show_product_category_id', 'show_product_category_id' );
and it will work. But I can't use a construction like:
[woof taxonomies=product_cat:[show_product_category_id]]
since nested shortcodes in Wordpress won't work. Therefore, apparently, I need to add to woocommerce the ability to specify not only product_cat:35, but also product_cat:auto.
How can i realize it? Or, is there also a way to use nested shortcodes in wordpress?
Of course that you can't nest shortcodes one in another, but what you can do is embed a shortcode in a another shortcode as follows:
function woof_current_product_category_id() {
$term = get_queried_object();
$term_id = 0; // Initializing
if ( isset($_GET['really_curr_tax']) && false !== strpos( $_GET['really_curr_tax'], 'product_cat' ) ) {
$term_id = (int) str_replace('-product_cat', '', $_GET['really_curr_tax']);
} elseif ( is_a($term, 'WP_Term') ) {
$term_id = (int) $term->term_id;
}
return do_shortcode("[woof taxonomies=product_cat:$term_id]"); // Always use return for a shortcode
}
add_shortcode( 'show_product_category_id', 'woof_current_product_category_id' );
Code goes in functions.php file of the active child theme (or active theme).
So the usage will simply be: [show_product_category_id]
I'm trying to add a custom CSS class for the search page that uses WooCommerce Product Search.
Search pages path is like:
domain.com/shop/ixwpss=3&title=0&excerpt=0&content=0&categories=0&attributes=0&tags=1&sku=0&v=a3420e5a4c03
When I search for the number 3 that represents the tag for products.
I managed to add the class for the whole shop, with the following function but I want to add only for the search page. Can someone help me?
add_filter( 'body_class', 'add_body_classes' );
function add_body_classes( $classes ) {
global $post;
if ( is_shop() )
$classes[] = 'search';
return $classes;
}
Please update the code like below
add_filter( 'body_class', function( $classes ) {
if ( is_shop() ) {return array_merge( $classes, array( 'class-name' ) );}
}
Assuming that the search page is using the archive-product.php
If you are using a WooCommerce compatible theme then you have to go in your themes folder -> woocommerce and find the archive-product.php. If the override file does not exists then go to wp-content/plugins/woocommerce/templates/archive-product.php
And a if statement to check if is search or not like below:
if ( is_search() ) {
<body class="your-class">
} else {
<body class="regular-class">
// the content that is already in that file (archive-product.php)
}
*if the part (body class in your case) is not there you have to locate it and do the same (probably it's in your header.php)
I use a WP 5.3 Twenty Seventeen child theme, but I don't want to edit templates, so I added a needed second (in fact it became the first in the displaying order) div wrap section to the top navigation menu with the bellow function. The problem is that I lost after this the fixed position of the menu (it is not sticky anymore now). How to remediate this? I played with the CSS code, but without success. The site in discussion is here.
function my_navigation_top( $slug, $name ) {
if( $name == 'top' ) { ?>
--- some content here ---
</div> <!-- wrap closed -->
<div class="wrap"> <!-- wrap opened -->
<?php }
}
add_action( 'get_template_part_template-parts/navigation/navigation', 'my_navigation_top', 10, 2 );
UPDATE
If instead of a second div wrap section I add a simple div section inside the wrap, the problem doesn't appear.
I am looking at the script file that sets the fixed class (that makes the top nav sticky when scrolling down). (File: twentyseventeen/assets/js/global.js)
And It seems the fixed class is not set if the height of the nav is too tall:
// Set properties of navigation.
function setNavProps() {
navigationHeight = $navigation.height();
navigationOuterHeight = $navigation.outerHeight();
navPadding = parseFloat( $navWrap.css( 'padding-top' ) ) * 2;
navMenuItemHeight = $navMenuItem.outerHeight() * 2;
idealNavHeight = navPadding + navMenuItemHeight;
navIsNotTooTall = navigationHeight <= idealNavHeight;
}
// Make navigation 'stick'.
function adjustScrollClass() {
// Make sure we're not on a mobile screen.
if ( 'none' === $menuToggle.css( 'display' ) ) {
// Make sure the nav isn't taller than two rows.
if ( navIsNotTooTall ) {
// When there's a custom header image or video, the header offset includes the height of the navigation.
if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
} else {
headerOffset = $customHeader.innerHeight();
}
// If the scroll is more than the custom header, set the fixed class.
if ( $( window ).scrollTop() >= headerOffset ) {
$navigation.addClass( navigationFixedClass );
} else {
$navigation.removeClass( navigationFixedClass );
}
} else {
// Remove 'fixed' class if nav is taller than two rows.
$navigation.removeClass( navigationFixedClass );
}
}
}
I am not entirely certain what the solution would be. One idea (which is not ideal) is to adapt the .js file and put true between the ( ) instead of navIsNotTooTall on this line:
if ( navIsNotTooTall ) {
If you want to add this change to the child theme, instead of the main theme: Put the changed global.js file in your child-theme directory here: twentyseventeen-child/assets/js/global.js
Then add this to functions.php of the child-theme:
add_action( 'wp_enqueue_scripts', 'override_globaljs_script', 100 );
function override_globaljs_script()
{
wp_dequeue_script( 'twentyseventeen-global' );
wp_deregister_script( 'twentyseventeen-global' );
wp_enqueue_script( 'twentyseventeen-global-child', get_stylesheet_directory_uri() . '/assets/js/global.js' );
}
It will unregister the main theme global.js and register it for the child theme. This is the 'proper' Wordpress way to do it as far as I am concerned.
I have a task to create a template which is specific to the category. So Lets say I have 10 categories but I want to create a specific template for lets say 3 of them. So if the category is a,b or c I will apply a certain template.
And then when I create a post and attach it to the specific category I need to show that specific template associated to the category.
Any headers?
The Advanced Custom Fields https://www.advancedcustomfields.com/ plugin should allow you to show different templates based off categories. It has some pretty fancy functionality, but can't remember if it can do exactly this.
There is a free version, so give it a try. Let me know how you go ;)
Delete everything in single.php
Insert the ‘switching’ code (see below)
Create 3(three) new templates with unique names. like : single-a,single-b,single-c.
On the server, the magical fairy dust in your modified single.php will automatically load the correct template when the page is requested
Please try below Code for the same.
if (in_category('21')) {include (TEMPLATEPATH . '/single-a.php');
}
else if (in_category('22')) {include (TEMPLATEPATH . '/single-b.php');
}
else if (in_category('23')) {include (TEMPLATEPATH . '/single-c.php');
}
else { include (TEMPLATEPATH . '/single-29.php');
}
There is single-a,single-b,single-c are 3 templates for different categories and your main code in it.
If you refer to Category_Templates
Wordpress will auto retrieve category files in the following format:
category-slug.php or category-ID.php
Let's say you have 3 categories, category a, category b, category c, to assign each of the template differently you can easily create category-a.php, category-b.php, category-c.php and place your desire template within the file and Wordpress will handle the rest.
Here you can use category_template
function wp_category_template( $template ) {
$cat = get_queried_object(); // get category object
if( 1 ) // check condition
$template = locate_template( 'template.php' ); // load template
return $template;
}
add_filter( 'category_template', 'wp_category_template' );
or as #shashi suggested you can use plugin custom-category-template
You have 3 options :
Option 1 : You can create 3 templates and name them according to the WordPress Template Hierarchy like this :
category-1.php
category-2.php
category-3.php
Option 2 : Use PHP code in your functions file to load 1 template for 3 different categories :
add_filter( 'template_include', 'custom_category_template', 99 );
function custom_category_template( $template ) {
if ( is_category(array( 1,2,3 ) ) ) {
$new_template = locate_template( array( 'custom.php' ) );
if ( '' != $new_template ) {
return $new_template;
}
}
return $template;
}
Use the in_category or is_category conditional tag depending on whether you want to load the template for posts in specific categories or only for the category archive page.
Option 3 : You can use the code in option 2 with the category_template filter :
add_filter( 'category_template', 'custom_category_template' );
function custom_category_template( $template ) {
if ( is_category(array( 1,2,3 ) ) ) {
$template = locate_template( 'custom.php' );
}
return $template;
}
Assumes your category i.d's are 1, 2 and 3. Swap out these to match your installations category i.d's
Can you tell me how you can make posts wordpress categories and with different colors?
I want to be the only menu in different colors as well as the category the items!
An example:
check out this site here that you like the color settings are changed as we post categories.
A lot of it depends on how your theme is set up, but here's a general overview:
1. Ensure that you are using the body_class() function
Check you theme's header.php and ensure the body tag looks something like:
<body <?php body_class(); ?>>
This will automatically add a bunch of classes to your body tag, including classes depending on which category archive page you are viewing.
2. Use a filter to add category classes to single posts
Insert the following function into your theme's functions.php file:
function my_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', 'my_body_class_add_categories' );
This will also add the category classes to single posts.
3. Add classes for pages
The body_class() function can also be filtered to add classes for page slugs. Add the following to functions.php:
function my_body_class_add_page_slug( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'my_body_class_add_page_slug' );
This will add the class page-title to the body.
4. Style as you please
This will vary according to your theme's markup, but it will be along the lines of:
.td-header-main-menu {
background: blue; // The fallback colour for all pages
}
.category-showbiz .td-header-main-menu {
background: red;
}
.category-sport .td-header-main-menu {
background: yellow;
}
.category-shendetsi .td-header-main-menu,
.page-shendetsi .td-header-main-menu {
background: green;
}
Conclusion
That should give you the general idea; we can't give you more specific instructions without seeing the website itself or know which theme you're using.