I've got a PHP code block that will assign a heading a different style depending on the main page title. However, my site has multiple sub-menu items for each main page as well. The code currently works in assigning new styles to the main navigation pages but isn't assigning the colour profiles to the sub-page style elements. How can I expand my solution to accommodate any new sub-pages (i.e. a wordpress/php function that gets the sub-pages of the main navigation item).
Here's my code:
if(get_the_title($ID) === "Services") {
echo '<style type="text/css">
.header-page h1 {
background-color: #9B87A9;
}
.header-page h2 {
background-color: #9B87A9;
}
</style>';
}
else if(get_the_title($ID) === "About") {
echo '<style type="text/css">
.header-page h1 {
background-color: #dea949;
}
.header-page h2 {
background-color: #dea949;
}
</style>';
}
So I'm looking for something similar to get_the_title($ID) to accommodate any of Services sub-menu items or About. I want a more automated solution rather than hard code each sub-page title into my if statement.
Instead of adding the css to the page try adding the class to the element.
Related
I have built an author page using Elementor Pro on Wordpress, and display various pieces of author metadata on the page within different sections. I would like to display a message to the author if a section doesn't contain author metadata.
In other words, if none of city, style_of_play or highest_division exist, then display profile_info_template (which is set to display: none by default)
I can get this to work when I use city only, but it stops working when I add the other 2 pieces of metadata. Any guidance on this would be much appreciated.
function nothing_to_show_display(){
global $post;
$author_id=$post->post_author;
$profile_info = get_the_author_meta('city', 'style_of_play', 'highest_division',
$author_id);
if(empty($profile_info)) : ?>
<style type="text/css">
#profile_info_template {
display: inline-block !important;
}
</style>;
<?php endif;
}
add_action( 'wp_head', 'nothing_to_show_display', 10, 1 );
The reason it stops working is because with that function you can only request one value of data at a time. https://developer.wordpress.org/reference/functions/get_the_author_meta/#div-comment-3500
My suggestion is to modify your code to only call one value at a time, then use the "OR" operator within your if statement, like this:
$author_city = get_the_author_meta('city', $author_id);
$author_style_of_play = get_the_author_meta('style_of_play', $author_id);
$author_highest_division = get_the_author_meta('highest_division', $author_id);
if(empty($author_city) || empty($author_style_of_play) || empty($author_highest_division)) : ?>
<style type="text/css">
#profile_info_template {
display: inline-block !important;
}
</style>;
<?php endif;
Also if you don't plan to use those values it is perfectly fine to simplify the code and place the functions within the if statement.
if(empty(get_the_author_meta('city', $author_id)) || empty(get_the_author_meta('style_of_play', $author_id)) || empty(get_the_author_meta('highest_division', $author_id))) : ?>
<style type="text/css">
#profile_info_template {
display: inline-block !important;
}
</style>;
<?php endif;
i want to hide ads for logged in user (subscribers). im using a plugin called "private" that generates shortcodes. i found the code i should use but dont know how to put it in my single.php. My single post is custom made so i cant use the rich editor.
the one i want to use...
[private role=”subscriber”]Content goes here[/private]
and i want to put this code in the middle position of my short code.
<div id="M589567ScriptRootC925056"></div>
<script src="https://jsc.adskeeper.co.uk/a/n/anime-tv.fun.925056.js" async></script>
You do not have to use [private] short codes to hide divs or ads in your case from logged in users.
Just use WordPress native current_user_can() function to target specific user roles like this in PHP file
if (current_user_can('subscriber')) {
//Hide something
} else {
//Show Something
}
You can do something if you want to hide something from all logged in users
if (is_user_logged_in) {
//Hide something
} else {
//Show Something
}
This code goes into your working php file or active theme function.php
There could be a much easier and versatile way to achieve that.
create a function to have the user role appear as a body class
function get_user_role() {
global $current_user;
$user_roles = $current_user->roles;
$user_role = array_shift($user_roles);
return $user_role;
}
add_filter('body_class','my_class_names');
function my_class_names($classes) {
$classes[] = get_user_role();
return $classes;
}
add a specific CSS class to posts, blocks, pages that you want to filter and declare display: none; or display: block; accordingly
Ex. I want to show a post to editors and authors but hide it to visitors, subscribers and contributors. So I add the class 'post-filter' to the post and add these lines to style.css
.post-filter,
.subscriber .post-filter,
.contributor .post-filter {display: none;}
.editor .post-filter,
.author .post-filter,
.administrator .post-filter {display: block;}
And that's it.
I have a site that is in wordpress that has a custom navigation. The site also does not use categories. My question is there away to create bread crumb from the custom navigation. I can dump out the information from the post by passing the post ID to a get_post($id), but I cannot see a relationship to previous links. I also looked in the wordpress database and did not see any relationship between the previous post.
Any help will be greatly appreciated.
First, if you are using wordpress.com they will have breadcrumb plugins. And they also exist for wordpress hosted sites and I'm sure wordpress.com home-made sites.
However, if you want to create the breadcrumb functionality from scratch, here's the link to the breadcrumb code from TheWebTaylor Wordpress site (it's long so I used the link rather than copy & paste): https://www.thewebtaylor.com/articles/wordpress-creating-breadcrumbs-without-a-plugin
To call the crumbs on your page use:
<?php custom_breadcrumbs(); ?>
Disclaimer: I have not tested this code, and please read the disclaimer at the bottom of the linked webpage.
Install the Yoast SEO plugin:
https://yoast.com/wordpress/plugins/seo/
Instructions on how to implement breadcrumbs using Yoast SEO:
https://kb.yoast.com/kb/implement-wordpress-seo-breadcrumbs/
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>
Create Breadcrumbs:
We’ve created a custom function called get_breadcrumb() to generate the breadcrumb links. You only need to add the get_breadcrumb() function code in functions.php file of the current theme.
1-Step) Copy Below Code in your theme functions.php file
function get_breadcrumb() {
echo 'Home';
if (is_category() || is_single()) {
echo " » ";
the_category(' • ');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo " » ";
echo the_title();
} elseif (is_search()) {
echo " » Search Results for... ";
echo '"<em>';
echo the_search_query();
echo '</em>"';
}
}
Display Breadcrumbs:
Call the get_breadcrumb() function in single.php file and others files where you want to display the breadcrumbs on your WordPress site.
2- STEP) Paste below code where you want to show breadcrumb for example (header.php)
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
Styling Breadcrumbs:
This CSS helps to style the breadcrumbs links.
3- STEP) Paste Below CSS
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
I am using Wordpress and WooCommerce to build a website for my client. For every product page I have set up two groups of links (buttons, secondary menu) to allow user to visit other product category pages. I would like certain links to be automatically a specific color and weight when the user is on a certain product page (like an active state, but without having to first clicked on the link, I guess similar to breadcrumbs to show where the user is in terms of what category/categories the product they're viewing belongs to).
I've been trying to target the post-id and the div of the specific links to make css changes, but it's not working. I would really appreciate any help!
Here is the css I used to target a specific secondary menu link:
#menu-item-1886 > a {
color: #003b59 !important;
font-weight: 600;
}
This works, but of course it made the change to this menu item across all pages. I want it to be only on a specific product page.
I also tried this, which also didn't work:
.body.post-id-766 #menu-item-1886 > a {
color: #003b59 !important;
font-weight: 600;
}
The site is at http://www.hoptri.d-gecko.com
Again, really would appreciate your help with this! Thanks in advance!
You can add with body_class WordPress filter hook and choosen conditional tags some additional classes where you want, like in this example:
add_filter( 'body_class', 'adding_some_custom_body_classes' );
function adding_some_custom_body_classes( $classes ) {
if ( is_product() ) {
$classes[] = 'product-single-pages';
} elseif( is_product() && is_single( array( 17, 19, 1, 11 ) ) {
$classes[] = 'product-single-pages-2';
}
return $classes;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and works
So you will be able to use that classes selectors in your CSS rules like (fake example):
body.product-single-pages #menu-item-1886 > a,
body.product-single-pages2 #menu-item-1886 > a { font-weight: 600; }
body.product-single-pages #menu-item-1886 > a { color: green !important; }
body.product-single-pages2 #menu-item-1886 > a { color: red !important; }
WooCommerce inject yet in body classes some specific classes as in this html example:
<body class="product-template-default single single-product postid-19 logged-in woocommerce woocommerce-page right-sidebar woocommerce-active customize-support">
So you can also use this class selectors in your css:
single-product
woocommerce
woocommerce-page
woocommerce-active
For example this way:
body.woocommerce.single-product.woocommerce-active #menu-item-1886 > a {
color: blue !important;
}
References to conditional tags:
Wordpress conditional tags list
WooCommerce conditional tags list
I am trying to add some css to portfolio pages only on my word press site.
An example page is:
http://www.1aproductions.co.uk/portfolio/22/
The css code i am trying to add is:
.header-wrapper {
background-position:top;
background-color:transparent !important;
background-image:url('http://www.1aproductions.co.uk/wp-content/uploads/2014/06/Florence-Nightingale-smaller-no-flo.jpg') !important;
background-size: 100% auto;
}
Which would display a similar effect to the header on this page (if I could only get it to work!)
http://www.1aproductions.co.uk/work/?cat=dramas
Any Help would be greatly appreciated!
Thanks
P
It looks as though portfolio is a custom post type. So try this:
function my_custom_css() {
if ( is_singular( 'portfolio' ) ) {
echo "<style>
.header-wrapper {
background-position:top;
background-color:transparent !important;
background-image:url('http://www.1aproductions.co.uk/wp-content/uploads/2014/06/Florence-Nightingale-smaller-no-flo.jpg') !important;
background-size: 100% auto;
}
</style>";
}
}
add_action( 'wp_head', 'my_custom_css' );
See the classes of body
single single-portfolio postid-22 siteorigin-panels fixed-header no-slider dark-header --- on portfolio
page page-id-7 page-template page-template-template-portfolio-gallery-php siteorigin-panels fixed-header no-slider dark-header --- on categories.
You can add your specific background using that classes.
.single-portfolio .header wrapper{
background: xxx;
}
and
.page-id-7 .header wrapper{
background: yyy;
}