What is the easiest method of highlighting the current page from a nav menu in Wordpress?
If your top nav links are manually inserted in your theme, you can do something like this:
<a href="page-link" <?php if(is_page('page-name') : ?>class="highlight"<?php endif; ?> >Link text</a>
I do something similar to this in a theme where certain pages and categories have special headers. There are a few conditional functions that help with this:
is_page('page-name')
is_category('category-name')
is_home()
is_front_page()
Edit: Didn't see the comment about it being dynamic WP links. You might still be able to use these functions if the query data you get back contains the page slugs.
You might instead consider using the get_pages() function and loop through it manually, doing an is_page() check on each one to see if the current page ID matches the ID of the page you are at in the array.
Current page highlighting sometimes depends on if it happens to be implemented in the CSS of the theme you're using, but this should work in a basic theme.
<?php wp_list_pages('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
CSS: Change the color in the CSS to whatever highlights well against the background of the menu bar or background image. Change the # to the container of the list pages call above.
#menu ul li a:active, #menu ul li.current_page_item a
{
color:#000;
}
You can use the dtabs plugin, which does just that, for both pages, categories, home, and other types of pages.
Related
I am working on setting up my category archive to look more like a grid using custom css and have already successfully removed the elements I wanted to using, for example,
.archive .entry-footer {
display: none;
}
So now I am left with post title and post summary. I would now like to remove the excerpt below the featured image thumbnail but in inspecting it with firebug, both sections seem to be labeled with .entry-summay. So if I use this code...
.archive .entry-summary {
display: none;
}
it removes both the excerpt and image. Looking through what I can see on firebug and the stylesheet, I can't spot what to use to drill down the summary further to remove the excerpt and not the image. I thought to tell it to have a 0 character excerpt length in the archive if it wasn't as simple as removing the other elements but am not sure how that works via css.
This is happening because you have a .entry-summary that wraps your image and your text, and another .entry-summary that wraps just the text (so one .entry-summary inside of the other).
To make it hide the text, you could target the inner .entry-summary like this:
.archive .entry-summary .entry-summary {
display: none;
}
Although, if you want to hide the text, you may want to consider editing the template in a child-theme so that it doesn't even exist on the page.
I'm working in wordpress, and I am having a bit of trouble.
As you see: in the page "articles" managed with page.php, it shows the categories widget at this point (see image 1),
Then, inside the page "articles", if you click in any subpage, managed by single.php, the categories widget should appear in a different position.
(image 2 is where it should appear and image 3 where it appears). I'm using a plugin to be able to manage structures through the dashboard, so I need to do it inside a php file.
Image 2:
Image 3:
I'm trying to include:
if ( is_page_template( 'single.php' ) ) {
echo '<style type=\"text/css\"> #sub_categories_widget-2 { margin-top: -150%; } </style>';
positioning it in my single.php or in my page.php but nothing seems to happen. Does anyone know what I'm doing so wrong? I make the widget appear though a plugin that creates a shortcode and I can add it in the editor.
Thank you
What you are doing can be achieved with css.
If you are in a single.php file, you should probably have a single class on your body or html tag. If not check this out.
So with this class at the top, now you can target your widget by page, single, page template etc...
.widget {
margin-top:0;
}
.single .widget {
margin-top: 300px //or whatever the height of the image;
}
What you want to do can be simply done by Javascript.
in jQuery use this code.
$('#id_name').css('property_name','property_value');
if you want to add class on particular element you can use .addClass method
$('#id_name').addClass('class_name');
Good Luck!
I've used custom CSS to create a strike-through effect for active menu items on my wordpress site: http://www.sekoul.com/
This is the code that I use to do this:
/* active menu item color */
.et_color_scheme_orange #top-menu li.current-menu-item > a {
color: #4a4a4a !important;
text-decoration: line-through !important;
}
However, on certain pages (ones which are generated by WP plugins), this effect doesn't work: http://www.sekoul.com/reading-list/
When I inspect the code, I can see that the ID's are not the same on these pages, but I can't seem to figure out which ID/class to apply the effect to. Any idea why this is happening / what I can do to select the appropriate ID/class ?
It's missing the .current-menu-item class because you're using a custom link. I'm assuming that "BOOKS" is a custom post type archive page, right?
If you need to have an active state on a custom post type archive page, you could try this solution that worked great for me: https://stackoverflow.com/a/22602901/4303385
It'll add a metabox on the Appearance > menu with custom posts type archive page with active state support.
Is there a simple way to create a customer menu in WordPress that does not output a list? Basically I want a menu with pipes between the links. Every solution I've found says to style them with a right border or background image, but I'm not crazy about this solution and what if I wanted something like a "/" or "ยป" between each link? I think live type would look better too. I already know I can remove the container div and ul tags using "items_wrap" and "container". Any ideas on how to ditch the li's too and add separators? A filter or hook?
I'm looking to do this with WordPress functionality. I know I can resort to CSS and jQuery if needed and in fact am doing that, but I'm still curious as to how to override the menu system.
Just style the list propperly
li { list-style-type:none; }
li:before { content:"/ "; }
http://jsfiddle.net/sVvs8/
I am currently using wp_nav_menu to generate my nav menu. Although everything is working and menu highlighting is working, how do you get child pages to be highlighted as well?
For example, I have a menu item named "Page" and it has 3 child pages under that. So when I am in any of the child pages, I want the main Page to still be highlighted...how is that possible with using wp_nav_menu..?
The body_class function which WordPress has can help you out here.
http://codex.wordpress.org/Function_Reference/body_class
What you'll want is current-menu-parent which you can utilise in your CSS. Not particularly well documented as far as I can tell, but this article helps:
http://www.designisphilosophy.com/tutorials/highlight-current-page-or-category/
Wordpress will give the current page the class 'current-menu-item' so just add the css you want to that. e.g.
.current-menu-item {
background: #0077CC;
}
Edit:- You can target the child menu items with
.sub-menu .current-menu-item {
background: #0077CC;
}
Edit2:- Use this to hilight the parent menu item when on a sub page
.current-menu-parent {
background: #0077CC;
}