I have just built my first WordPress theme, the only thing I can't seem to work out is how can I tell WordPress to make menu links with the class active when it is on the page? This is the code I had for the static page:
function curPageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
<?php if(curPageName() == 'index.php'){ ?>
<li class="current">
Home
</li>
<?php } else{ ?>
<li>
Home
</li>
<?php } ?>
I have still got this code in the WordPress theme, but it is not working at the moment, I am thinking I could probably make it work as it must have something to do with the exact links, but I'd also like the built the menu in WordPress so that would require me to get rid of this code..
Anyone know what I can do or link me to something that will help me out?
The best way is to assign a page name to the body tag of your page identifying it. Then use php to assign an active class if the page matches.
CSS
a.active:hover {
color:#000;
border:1px solid #000;
background:#fff;
}
HTML
<body <?php $page = "one" ?>>
<div id="navbar">
<ul>
<li><a<?php if($page == 'one'): ?> class="active"<? endif ?> href="one.php">Page 1</a></li>
<li><a<?php if($page == 'two'): ?> class="active" <? endif ?> href="two.php">Page 2</a></li>
<li><a<?php if($page == 'three'): ?> class="active" <? endif ?> href="three.php">Page 3</a></li>
<li><a<?php if($page == 'four'): ?> class="active"<? endif ?> href="four.php">Page 4</a></li>
</ul>
</div>
In the above example page one will be active
Related
I am building this website where I have pages with child pages, when I click on the parent link in the navigation menu, I get redirected to that page. It will then display links to all its child pages on that page, my problem is that I want the parent page link in the navigation menu to always be highlighted even when I click on the child page link. So in the end both the parent page link AND the child page link should be highlighted.
I have tried some different things, but none seem to work, I can loop out all the child pages of the parent, but not make them highlighted.
<?php
if ( $post->post_parent ) :
$parent = $post->post_parent;
else :
$parent = $post->ID;
endif;
$childpages = get_pages('child_of=' . $parent . '&sort_column=menu_order');
?>
<div class="row pad60">
<ul class="category-nav column">
<?php foreach( $childpages as $childpage ) { ?>
<a href="<?= get_page_link( $childpage->ID ) ?>">
<li><div class="primary-btn"> <?= $childpage->post_title ?> </div></li>
</a>
<?php } // End foreach ?>
</ul>
</div>
This is what I am using right now, but I feel this isn't the right way to go in the first place..
Thank you!
WordPress has a build in CSS classes to target the menus. https://developer.wordpress.org/reference/functions/wp_nav_menu/#Menu_Item_CSS_Classes
// This will highlight all the current menus
.current-menu-item a {
color: blue;
}
/* This will highlight its parent, when you are in its child page. */
.current_page_parent a {
color: orange;
}
I have a question about my menu. I have a menu with 6 items, which I want to give a different colour if they are ACTIVE (so in use by my users). I tried this already:
<nav id="sub-navigation" class="toggles-menu">
<ul id="quick-index-nav" role="navigation" class="pills slim muted">
<li>
<a id="qindex-day">abc</a>
</li>
<li>
<a id="qindex-day">random</a>
</li>
<li<? if(!$_GET['t']||$_GET['t']=='') echo ' class="active"';?>>
<a id="qindex-popular" target="right" href="right.php">all of them</a>
</li>
<li<? if($_GET['t']=='tod') echo ' class="active"';?>>
<a id="qindex-today" target="right" href="right.php?t=tod">today</a>
</li>
<li class="yesterday<? if($_GET['t']=='yes') echo ' active"';?>">
<a id="qindex-yesterday" target="right" href="right.php?t=yes">yesterday</a>
</li>
<li<? if($_GET['t']=='mix') echo ' class="active"';?>>
<a id="qindex-day" target="right" href="right.php?t=mix">samba</a>
</li>
</ul>
</nav>
CSS:
.pills>li.active>a{color:#fff}
.pills.slim>li>a{padding:3px 5px;}
.pills.muted>li>a{color:gray}
.pills.muted>li.active>a{color:#fff}
But this won't work. It makes nothing active if I click on them.
You need to add styles to your page, either via an external stylesheet or embedded in a style tag directly in the page.
CSS:
li.active a{
color: red; // for example
}
You can also use inline styles:
<li<? if(!$_GET['t']||$_GET['t']=='') echo ' style="color: red;"';?>>
It will work but is not recommended.
I have a portfolio page with a list of clients which when clicked on will display the corresponding gallery- all of this happens on the same page. I would like for the client name to be highlighted when the corresponding gallery is shown. I thought a:active would work, but so far isn't. Any ideas? (If it matters, I'm using Wordpress.)
live site
.active {
border: 1px solid #ff893b;
}
<div id="client-list">
<p>
<a href="?page_id=24" <?php if ($_get['page_id']=='24'){echo 'class="active"';} ?> >Häagen Dazs</a><br/>
<a href="?page_id=26" <?php if ($_get['page_id']=='26'){echo 'class="active"';} ?>>Hugo Boss Rodeo Drive</a><br/>
<a href="?page_id=28" <?php if ($_get['page_id']=='28'){echo 'class="active"';} ?>>Ford</a><br/>
<a href="?page_id=30" <?php if ($_get['page_id']=='30'){echo 'class="active"';} ?>>MOCA Contemporaries</a><br/>
<a href="?page_id=32" <?php if ($_get['page_id']=='32'){echo 'class="active"';} ?>>XBOX 360 Halo 3 Sneak Preview</a><br/>
<a href="?page_id=34" <?php if ($_get['page_id']=='34'){echo 'class="active"';} ?>>Saddlerock Smith & Basso Weddings</a><br/>
<a href="?page_id=36" <?php if ($_get['page_id']=='36'){echo 'class="active"';} ?>>Christie's</a><br/>
<a href="?page_id=42" <?php if ($_get['page_id']=='42'){echo 'class="active"';} ?>>Instyle Magazine + Ming by Mango</a></p>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
});
});
</script>
</div><!-- end client-list -->
<?php
if (!isset($_GET['page_id'])) {
$page_id='24';
}else{
$page_id=$_GET['page_id'];
}
?>
<html>
<head>
<title>Lab 1</title>
<style>
.active {
border: 1px solid #ff893b;
background:red;
color:white;
}
</style>
</head>
<body>
<div id="client-list">
<p>
<a href="?page_id=24" <?php if ($page_id=='24'){echo 'class="active"';} ?>> Häagen Dazs</a><br/>
<a href="?page_id=26" <?php if ($page_id=='26'){echo 'class="active"';} ?>> Hugo Boss Rodeo Drive</a><br/>
<a href="?page_id=28" <?php if ($page_id=='28'){echo 'class="active"';} ?>> Ford</a><br/>
<a href="?page_id=30" <?php if ($page_id=='30'){echo 'class="active"';} ?>> MOCA Contemporaries</a><br/>
<a href="?page_id=32" <?php if ($page_id=='32'){echo 'class="active"';} ?>> XBOX 360 Halo 3 Sneak Preview</a><br/>
<a href="?page_id=34" <?php if ($page_id=='34'){echo 'class="active"';} ?>> Saddlerock Smith & Basso Weddings</a><br/>
<a href="?page_id=36" <?php if ($page_id=='36'){echo 'class="active"';} ?>> Christie's</a><br/>
<a href="?page_id=42" <?php if ($page_id=='42'){echo 'class="active"';} ?>> Instyle Magazine + Ming by Mango</a>
</p>
</div>
</body>
</html>
i think what you need is not a:active but instead you should do a:visited.
#client-list p a:visited { border: 1px solid #ff893b; }
html
<div id="client-list">
<p>Häagen Dazs<br/>Hugo Boss Rodeo Drive<br/>Ford<br/>MOCA Contemporaries<br/>XBOX 360 Halo 3 Sneak Preview<br/>Saddlerock Smith & Basso Weddings<br/>Christie's<br/>Instyle Magazine + Ming by Mango</p>
</div>
You could use jQuery. When a link is clicked, add a class, e.g., "current" that highlights that link, and removes the class from all the other links (e.g., whichever one was previously highlighted).
I don't think you can do this purely with CSS. The :active class means you are in the process of actively clicking the link; it doesn't persist after you finish clicking it.
Hey why not use a jquery function like the following for adding and removing classes. It goes like this
Style
#client-list a.clicked
{
color : #ffffff;
/* or what ever style you want */
}
Jquery function
$(function(){.removeClass()
$('#client-list a').bind('click' , function(){
$('#client-list a').removeClass('clicked');
$(this).addClass('clicked');
} )
})
What query does it strip all the anchor tags from the class clicked and add it only to the current one.
Of course if you add specific click id to each anchor tag you can just save the previously clicked anchor.
I want to make the easiest css for menus. There's an outer div and an inner anchor. If the outer's class is the same as the inner's id, that will be active styled.
Example code:
<div class='<?php echo $_GET['menu']; ?>'>
<a href="index.php?menu=menu1" id='menu1'>Menu 1</a>
<a href="index.php?menu=menu2" id='menu2'>Menu 2</a>
<a href="index.php?menu=menu3" id='menu3'>Menu 3</a>
<a href="index.php?menu=menu4" id='menu4'>Menu 4</a>
<a href="index.php?menu=menu5" id='menu5'>Menu 5</a>
</div>
and I don't want to write a lot of css, like:
.menu1 #menu1, .menu2 #menu2, .menu3 ....
{ /*active stlye*/}
so I want the following: if the classname is the same of the id under it would be active.
Thanks in advance.
You can't do that with CSS ; maybe you could instead use PHP to accomplish something close :
<?php for($i=1;$i<=5;$i++){ ?>
<a href="index.php?menu=menu<?php echo $i;?>" <?php if($_GET['menu'] == 'menu'.$i) echo 'class="selected"'; ?>>Menu <?php echo $i;?></a>
<?php } ?>
And the CSS :
.selected{
/*active style*/
}
Edit : a solution with PHP is better than one based on JS because : everyone will see the .selected class, even people who have JS deactivated + for the others, the menu will not blink. Honestly it is super annoying to see a menu CSS changed via JS.
That's not possible. CSS isn't a programming language, you have to fully specify every selector.
But since you already work with PHP it would be a lot easier if you apply the class to one of your anchor tags:
<div class='<?php echo $_GET['menu']; ?>'>
<a href="index.php?menu=menu1" <?php echo $a_class[1]; ?> id='menu1'>Menu 1</a>
<a href="index.php?menu=menu2" <?php echo $a_class[2]; ?> id='menu2'>Menu 2</a>
<a href="index.php?menu=menu3" <?php echo $a_class[3]; ?> id='menu3'>Menu 3</a>
<a href="index.php?menu=menu4" <?php echo $a_class[4]; ?> id='menu4'>Menu 4</a>
<a href="index.php?menu=menu5" <?php echo $a_class[5]; ?> id='menu5'>Menu 5</a>
</div>
You have to either specify a bunch of selectors or add code to your PHP script.
Let's suppose I got you well. Then an answer could be :
<div id="menu">
<?php
for($i = 0; $i < 5; $i++) {
if(isset($_GET['menu']) && $i == $_GET['menu'])
echo " Menu $i";
else
echo " Menu $i";
}
?>
</div>
And in your CSS
#menu a {
/* Whatever you want for your normal links */
}
#menu .menu_active {
/* Whatever you want for your active link */
}
And that's it !
I'm not sure exactly what kind of script I need for this, hopefully someone on here knows.
On the home/archive pages of a wordpress powered blog I am building I have a grid of thumbnails (featured images) only. Instead of these linking to the actual post/page, I'd like them to trigger a lightbox type of element that has a description of the post/page.
From there, the user would be able to either continue (via read more) to the post or close it and continue searching the grid.
Any insight is greatly appreciated!
Pure CSS Solution:
<body>
<div id="featured-grid">
<?php
if(have_posts()) : while(have_posts()) : the_post();
$default = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_thumb.jpg">';
$thumb = has_post_thumbnail() ? get_the_post_thumbnail() : $default;
?>
<div class="post-block">
<div class="post-thumb">
<a class="hover-trigger" href="#"><?php echo $thumb; ?></a>
</div>
<div class="post-preview lightbox">
<div class="preview-wrap">
<a class="featured-image" href="<?php the_permalink(); ?>"><?php echo $thumb; ?></a>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php
endwhile;endif;
?>
</div>
</body>
<style type="text/css">
.post-block{width:300px;height:300px;}
.post-thumb{width:100%;height:100%;margin:10px;float:left;}
.post-thumb *{display:block;width:100%;height:100%;}
.lightbox{
display:none;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
position:fixed;
top:0;
left:0;
}
.preview-wrap{width:960px;margin:0 auto;position:relative;top:40px;background:#FFF;}
.post-block:hover .lightbox{display:block;}
.post-block:hover .post-thumb{display:none;}
</style>
This is EXTREMELY rudimentary and is largely untested. Overall, this should get you started in the right direction. Hope this helps!