I've got this code that allow me to display the logged-in customer in main header menu.
what I want is to change the location (or place) in the header (not in the menu), to change the color and the link url of this displayed username in the menu.
That was the code I was using to display it in the menu:
add_filter( 'wp_nav_menu_items', 'my_custom_menu_item');
function my_custom_menu_item($items)
{
if(is_user_logged_in())
{
$user=wp_get_current_user();
$name=$user->display_name; // or user_login , user_firstname, user_lastname
$items .= '<li>'.$name.'</li>';
}
return $items;
}
Here is the generated header top bar HTML code where I would like to have this, in the right after the mini-cart:
<div id="top-header">
<div class="container clearfix">
<div class="et-info"></div>
<div class="et-secondary-menu">
<div class="et-duplicate-social-icons"></div>
<a class="et-cart-info" href="#"></a>
</div>
</div>
</div>
How can I achieve this?
Thanks
Yes it's possible making a function that you will use in your header.php theme file:
function topbar_logged_user( $link = '#' ) {
// get the currect user
$cur_user = wp_get_current_user(); // $cur_user->display_name (or user_login , user_firstname, user_lastname)
// loggin users only
if ( $cur_user->exists() )
echo '<a class="user-topbar" href="' . $link . '">' . $cur_user->display_name . '</a>';
}
This code goes on function.php file of your active child theme (or theme) OR in plugin files too.
USAGE in your header.php active child theme file (or active theme)
<div id="top-header">
<div class="container clearfix">
<div class="et-info"></div>
<div class="et-secondary-menu">
<div class="et-duplicate-social-icons"></div>
<a class="et-cart-info" href="#"></a>
<?php function topbar_logged_user( 'your_link_in_here' ); ?>
</div>
</div>
</div>
And in style.css CSS file of your active child theme (or theme), you could add something like this for example:
a.user-topbar {
color: #999;
margin-left: 10px;
display: inline-block;
}
You can add/change custom css rules to fit your needs.
This should work
Related
I want to create a onclick modal in single product page. I have put together the following:
FILES
js/modal-jquery.js and modal-box.html are uploaded in child theme's directory.
css is in child theme's css.
I enqueued the jquery in functions.php
// Enqueue MODAL Jquery JS
function my_enqueue_stuff() {
if(is_singular( 'product' ))
{
wp_enqueue_script( 'modal-jquery-js', get_stylesheet_directory_uri() . '/js/modal-jquery.js');
// wp_enqueue_script( 'modal-box', get_stylesheet_directory_uri() . 'modal-box.html');
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );
LINK in functions.php
// POPUP LINK
add_action( 'woocommerce_before_add_to_cart_form', 'popup-modal', 3 );
function popup-modal() {
// $file = file directory to modal-box.html
echo '<a class="js-open-modal" href="#" data-modal-id="popup"> Click me </a>';
}
modal-box.html
<div id="popup" class="modal-box">
<header>
×
<h3>Modal Title</h3>
</header>
<div class="modal-body">
<p>Modal Body</p>
</div>
<footer>
Close Button
</footer>
</div>
I'm not sure if this is the right approach.
I've been trying to add modal-box.html into function popup-modal().
I've also tried to enqueue modal-box.html but it gives an error message Uncaught SyntaxError: expected expression, got '<'
How can I load the html file as an external file into the single product page? If this is not the right way to do it, how can I add a modal box to the single product page?
Thanks
Instead of is_singular( 'product' ) use woocommerce's own is_product()
For the modal, what about including it in the footer, also only on product pages, like this?:
function your_modal_footer(){
if( !is_product() ){
return;
}
?>
<div id="popup" class="modal-box">
<header>
×
<h3>Modal Title</h3>
</header>
<div class="modal-body">
<p>Modal Body</p>
</div>
<footer>
Close Button
</footer>
</div>
<?php
}
add_action('wp_footer', 'your_modal_footer');
I would add a style="display:none;" to the popup div and then make it visible onclick of the popup's trigger.
So my plan was to add custom banner to all pages simply using code in functions.php, it works, but not how I would like to
Code:
add_action( 'woocommerce_after_main_content', 'after_main_content', 1 );
function after_main_content() {
echo ' <style>
.img-container {
text-align: center;
}
</style>
<div class="img-container">
<img src="https://www.prospecs.lt/wp-content/uploads/2020/12/dpdtt-1.png" >
</div>
';
}
Problem:
Only in pages with sidebars my banner get's allocated to another section.
Any ideas how to place it in the right place on pages with sidebar?
my site: www.prospecs.lt
I suggest, you should use a theme footer action. Which is: ocean_after_main So the code would be:
add_action( 'ocean_after_main', 'after_main_content', 1 );
function after_main_content() {
if( is_shop() ){
echo ' <style>
.img-container {
text-align: center;
}
</style>
<div class="img-container">
<img src="https://www.prospecs.lt/wp-content/uploads/2020/12/dpdtt-1.png" >
</div>
';
}
}
i created a header.php for my web site.
For my menu, i created 5 buttons.
When i press on a button it redirect me on the page associated to it.
Until now everything fine.
What i want is, on the current page, my button of the page associated to it change to an other color or background image.
I dont know if we can do that and if i explain myself well.
here my header.php
<div id="main_menu">
<div id="menu_blog"><button onclick="location.href='blog.html'"><h1>Trucs/Astuces</h1></button></div>
<div id="menu_contact"><button onclick="location.href='/contact.php'"><h1>Contact</h1></button></div>
<div id="menu_soumission"><button onclick="location.href='/soumission.php'"><h1>Soumission</h1></button></div>
<div id="menu_realisation"><button onclick="location.href='/realisations.php'">
<h1>Réalisations</h1></button></div>
<div id="menu_service"><button onclick="location.href='/services.php'">
<h1>Services</h1></button></div>
<div id="menu_a_propos"><button onclick="location.href='/a_propos.php'"><h1>L'entreprise</h1></button></div>
</div>
Simple way is use CSS
#yourbutton:hover{
background-color: red;
}
or
#yourbutton:active{
background-color: red;
}
Pass a GET value with each link
<div id="menu_contact"><button onclick="location.href='/contact.php?active=1'"><h1>Contact</h1></button></div>
check the value of active in the button
< button <?php if ($_GET['active']==1) echo 'class="active"'; ?> ..../>
then make a css style for active class
.active{
/*your style here*/
}
Your PHP page:
<div id="main_menu">
<div id="menu_blog">
<button onclick="location.href='/blog.html'" <?php if($_SERVER['REQUEST_URI'] == '/blog.html'){echo 'class="currentPage"'; }?>>
<h1>Trucs/Astuces</h1>
</button>
</div>
… and so on for each menu item ...
</div>
Your CSS:
button.currentPage{
background-color: red;
}
Short version:
add $current_location to every page and name it after it
<?php
$current_location = "a_propos" ;
?>
Check if location is correct, then change background color
<div id="main_menu">
<div id="menu_a_propos"><button <?php if ($current_location == "a_propos");?> style=" background-color: red;"<?php };?> onclick="location.href='/a_propos.php'"><h1>L'entreprise</h1></button></div>
</div>
I have a shortcode that I put in my post but somehow it doent execute for some reasong. Here is the code I have:
short-code.php:
add_shortcode('teammate',function($atts){
$classes=$atts['country'];
$imgUrl=$atts['img'];
$name=$atts['name'];
$description=$atts['description'];
echo '
<div class="member "'.$classes.'>
<div class="member-img">
<img src="'.$imgUrl.'">
</div>
<div class="member-desc">
<h1>'.$name.'</h1>
<p>'.$description.'</p>
</div>
<div class="clear"> </div>
</div>
';
});
Here is how I include the file in functions.php:
$includes = array(
'includes/theme-options.php', // Options panel settings and custom settings
'includes/theme-functions.php', // Custom theme functions
'includes/theme-actions.php', // Theme actions & user defined hooks
'includes/theme-comments.php', // Custom comments/pingback loop
'includes/theme-js.php', // Load JavaScript via wp_enqueue_script
'includes/sidebar-init.php', // Initialize widgetized areas
'includes/theme-widgets.php', // Theme widgets
'includes/short-code.php', // Custom shortcode file for side menu
'includes/team.php' //team shortcode
);
and here is what i put in my page:
<div class="outer-members">
<div class="inner-members">
[teammate name="Darko Petkovski" img="http://myurl.com/myimage.jpg" description="test" country="mc"]
</div>
</div>
Seems that the code is working ok, but the only problem is that shortcode isn't executing outside wp.
I'm currently working on a site for a client - It is all working fine but within the navigation I have setup of for the child links using the following code
<div id="sub_nav_del">
<h4>Take a seat</h4>
<?php
$subnav_parent = ($post->post_parent) ? $post->post_parent : $post->ID;
$pages = get_pages('child_of=' . $subnav_parent . '&sort_column=menu_order');
$count = 0;
foreach($pages as $page)
{ ?>
<ul>
<li>
<h5 class="del">
<a href="<?php echo get_page_link($page->ID) ?>" ><?php echo $page->post_title ?></a>
</h5>
</li>
</ul>
<?php
}
?>
</div>
You can see an example at http://www.lagourmetteria.co.uk/take-a-seat/wine-room/, for that page I would like the current pages link orange.
I would like it to make the current link to be a different colour just within the child navigation. Is there a simple way to do this, unfortunately my PHP skills aren't fantastic.
You already have what you need as a class in the <body> which is wine-room (probably the slug). So in your CSS you can do the following magic:
body.wine-room a[href*="wine-room"],
body.tasting-room a[href*="tasting-room"],
body.food-drink-menu a[href*="food-drink-menu"],
body.have-it-all-private-parties a[href*="have-it-all-private-parties"]
{
color: orange !important;
}
UPDATE
Added all slugs on that submenu.
UPDATE 2
Added !important to supersede any other style.