I just want to know how to add a specific class to the "home" link in wordpress.
Actually all the li has something like class="page_item page-item-XXXXX" where XXXXX is a number but the "home" link has no class.
Can I fix that ?
thanks
You can add custom classes to menu items using the following in your functions.php
add_filter('nav_menu_css_class', 'fkp_special_nav_class', 10, 2);
function fkp_special_nav_class($classes, $item)
{
if($item->title == 'Home or what ever'){
$classes[] = 'myCusomClass';
}
return $classes;
}
Add following code in your functions.php
add_filter('nav_menu_css_class' , 'add_extra_class' , 10 , 2);
function add_extra_class($classes, $item){
if($item->title == 'Home'){ // In this case your Home page's title should be 'Home'
$classes[] = 'my_home_class';
}
return $classes;
}
Related
I was trying to add a specific class to the admin section. I created a new top-level menu page and now I want to add a specific class to this top-level menu and its submenu items.
What I have tried so far is that I used WP_Screen to get the data of the current screen.
If I check the submenu page and I did var_dump(get_current_screen()). It shows every detail.
But now the case is that If I use get_current_screen() with admin_body_class why it doesn't work.
As far as I know, the hook is early called before the submenu page details are loaded.
Now I want to ask, how it is possible to check if the submenu has a specific parent base,
Here is the code that I tried so far.
add_filter('admin_body_class', 'tw_admin_body_class');
function tw_admin_body_class( $classes ) {
$screen = get_current_screen();
var_dump($screen);
if ( $screen->parent_base == 'tw-top' ) {
return $classes . ' raashid';
}
}
But parent_base is set to null. Any idea how to add class to submenu pages if it is under the specific yop-level menu.
It worked by using the Id option.
Here is the working option.
add_filter( 'admin_body_class', 'my_admin_body_class' );
function my_admin_body_class( $classes ) {
$screen = get_current_screen();
$classes .= ' raashid';
if ( get_plugin_page_hook( 'tw-top', '' ) === $screen->id ) {
return $classes;
}
}
I'm working on a theme with redux-framework and I want to remove this notification from theme options.
Edit :
This is a demo link : https://demo.redux.io/wp-admin/admin.php?page=_options&tab=0
Add this selector in your style
.redux-container #redux-header .display_header span.redux-dev-mode-notice{ display:none}
please use this filter
$this->args = apply_filters( "redux/args/{$this->args['opt_name']}", $this->args );
the code should be like this
add_filter( 'redux/args/OPTION_NAME', 'disabled_dev_mode', 10, 1 );
function disabled_dev_mode( $args ) {
$args['dev_mode'] = false;
return $args;
}
I want to add a button for a responsive dropdown in a wordpress menu, which I can trigger with javascript.
For that I need a custom link with an icon or something like that after the a-tag but inside the li-tag.
How can I check a menuitem if it has a submenu and add a custom a-tag inside?
I've tried the walker and add_filter function, but it doesn't work.
Can anybody help me?
Thanks
If you add this to your function.php file, it will add class dropdown to all the parent menus with children (submenus). Then you can target .dropdown with javascript.
function menu_set_dropdown( $sorted_menu_items, $args ) {
$last_top = 0;
foreach ( $sorted_menu_items as $key => $obj ) {
// it is a top lv item?
if ( 0 == $obj->menu_item_parent ) {
// set the key of the parent
$last_top = $key;
} else {
$sorted_menu_items[$last_top]->classes['dropdown'] = 'dropdown';
}
}
return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );
I want to add current-menu-item class to the li if it is a single page.
I am trying to do this by using wp_nav_menu_objects hook with a custom function but don't know how to get the particular menu item and set a condition to assign the class to it.
Here is the code.
add_filter('wp_nav_menu_objects' , 'my_menu_class');
function my_menu_class($menu) {
//if it is a single post page of a particular post type (in this case 'property')
if( is_single() && is_post_type_archive( 'property' ) ) {
//get all the menu items
foreach($menu as $key => $item) {
// check if the menu item is "Commercial Property"
if($item == "Commercial Property") {
//assign the class to that menu item
$menu[$key]->classes[] = 'current-menu-item';
}
}
}
return $menu;
}
This code is just to represent the logic. Please suggest if what I need can be achieved with this method or there is a better approach to it.
Thanks.
In my WP theme, I wanted to remove all wordpess menu classes, add my own and on specific condition ( for example if the menu has an active class ) to add another class. Here s my code
function add_custom_classes($classes){
$newClasses[] = "navigation__item";
if( in_array('current_page_item', $classes) ){
array_push($newClasses, "navigation__item-active");
}
return $newClasses;
}
add_filter('nav_menu_css_class', 'add_custom_classes', 100, 1);
add_filter('nav_menu_item_id', 'add_custom_classes', 100, 1);
add_filter('page_css_class', 'add_custom_classes', 100, 1);
You can add your own conditions
is_single is actually looking for a single post. You need is_page
Wordpress already provides the class if it is a single page
current-post-ancestor
on any post detail page you can inspect the menu you will find that class so in other way you can utilize current-post-ancestor class for what you need to do
Hope it makes sense
I have solved it using the HTTP_REFERER to set conditions in the same function.
Don't feel it is the best way to achieve this but it sorts me out.
Here is the code if anyone else needs a reference.
function nav_menu_class($menu) {
//To dynamically get the directory path from the URL irrespective of the local or web server.
$ref = $_SERVER['HTTP_REFERER']; // prev page url.
$split_ref = pathinfo($ref); // splitting the url to seperate the directory (http://dev.calyxagency.com/horizoncapital/site-new/) from the file path.
$dir_path .= $split_ref[ "dirname" ]; // extracting the host + directory from the full path
$class = 'current-menu-item'; // class to be assigned.
foreach($menu as $key => $item) {
if( $menu[$key]-> ID == 101 ) { // check if the menu item matches this ID
if( $ref == $dir_path.'/properties-to-let/' || $ref == $dir_path.'/properties-for-sale/' || $ref == $dir_path.'/commercial-property/' ) {
$menu[$key]->classes[] = $class;
}
} elseif( $menu[$key]-> ID == 15 ) { // check if the menu item matches this ID
if( $ref == $dir_path.'/business-for-sale/' ) { // check if the single page has come from this page for assigning current class to only this menu item
$menu[$key]->classes[] = $class;
}
} elseif( $menu[$key]-> ID == 18 ) { // check if the menu item matches this ID
if( $ref == $dir_path.'/news/' ) { // check if the single page has come from this page for assigning current class to only this menu item
$menu[$key]->classes[] = $class;
}
}
}
return $menu;
}
add_filter('wp_nav_menu_objects' , 'nav_menu_class');
Under Pages menu in Wordpress Admin page, I got this layout:
Pages
Edit (url: edit-pages.php)
Add New (url: page-new.php)
Special Pages (url: edit-pages.php?special-pages=true)
as you can see, I've added a new submenu item called Special Pages which is pretty much a link to to Edit page with custom filter. Because Wordpress use file name to identify and highlight the submenu item, so whenever I click on Special Pages, the Edit submenu item is selected. Is there anyway to force Wordpress to select Special Pages menu item instead?
Cheers
better solution:
add_filter('parent_file', 'my_plugin_select_submenu');
function my_plugin_select_submenu($file) {
global $plugin_page;
if ('__my-current-submenu-slug__' == $plugin_page) {
$plugin_page = '__my-submenu-slug-to-select__';
}
return $file;
}
To further clarify Ken Vu's answer, edit the global variables $submenu_file and $parent_file. E.g., to highlight your page:
global $submenu_file;
$submenu_file = "edit-pages.php?special-pages=true";
If you need to change the top-level item highlighted, use $parent_file. E.g., highlight the "Writing" setting page:
global $parent_file;
global $submenu_file;
$parent_file = 'options-general.php';
$submenu_file = 'options-writing.php';
Solution: use $submenu_file variable
$submenu_file = "edit-pages.php?special-pages=true"
Thanks Ken Vu and Jonathan Brinley. Using your answers, I finally got the highlighting of my admin menu to work properly. As I struggled a bit to get it to work, I though I would post the entire result here, so other people can find it more easily :
The idea is to call the parent_file filter (undocumented, as many Wordpress parts unfornatunately). In my case, I was adding a custom menu instead of the default generated when creating a custom post type.
In my custom post code, I call the add_meta_boxes action. Within this hook, I issue my call to the parent_file filter :
add_filter('parent_file', array(&$this, 'highlight_admin_menu'));
_
Then this is how my hightlight_admin_menu function looks like :
function highlight_admin_menu($some_slug){
global $parent_file;
$parent_file = 'post.php?post=149&action=edit';
return $parent_file;
}
_
This got my menu to highlight properly. Try playing around with you own code to know where to issue the add_filter('parent_file', ...) code. Find a bit of code executed only on that particular page load, but soon enough that it is still possible to modify the $parent_file variable.
I hope this helps!
For changing the highlighted menu item for a submenu item, the proper filter is submenu_file.
add_filter('submenu_file', 'menuBold');
static function menuBold($submenu_file)
{
if ( checkProperPage($_GET) ) {
// The address of the link to be highlighted
return 'post-new?post_type=foobar&foo=bar';
}
// Don't change anything
return $submenu_file;
}
The check happens in WP's ~/wp-admin/menu-header.php file on line 194 (Wordpress 4.5.3):
if ( isset( $submenu_file ) ) {
if ( $submenu_file == $sub_item[2] )
$class[] = 'current';
...
}
You can modify this code to work for you. You can change both parent and submenu with that. Tested code.
function change_active_parent($submenu_file)
{
global $parent_file;
$zone = 'edit-tags.php?taxonomy=zone&post_type=product';
$storefront = 'edit-tags.php?taxonomy=storefront&post_type=product';
$container = 'edit-tags.php?taxonomy=container&post_type=product';
if (esc_html($zone) == $submenu_file) {
$parent_file = 'parent';
$submenu_file = $zone;
}
elseif (esc_html($storefront) == $submenu_file) {
$parent_file = 'parent';
$submenu_file = $storefront;
}
elseif (esc_html($container) == $submenu_file) {
$parent_file = 'parent';
$submenu_file = $container;
}
return $submenu_file;
}
add_filter( 'submenu_file', 'change_active_parent' );
Use the load-{$page_hook} action hook and modify the necessary globals:
/**
* For giggles, lets make an admin page that is not "in the menu" to play with.
*/
add_action('admin_menu', 'mort1305_admin_menu');
function mort1305_admin_menu() {
add_submenu_page(
NULL,
'Page Title',
'',
'administrator',
'my_slug',
'mort1305_page_content'
);
}
/**
* The menu item to highlight and the submenu item to embolden.
*/
add_action('load-admin_page_my_slug', 'mort1305_on_page_load');
function mort1305_on_page_load(){
global $plugin_file, $submenu_file, $title;
$plugin_page = 'slug-of-menu-item-to-be-highlighted';
$submenu_file = 'slug-of-submenu-item-to-be-bold';
foreach($submenu[NULL] as $submenu_arr) {
if($submenu_arr[2] === 'test_page_slug') {
$title = $submenu_arr[3];
break;
}
}
}
/**
* Page content to display.
*/
function mort_1305_page_content() {
echo This is the '. get_admin_page_title() .' page. The slug of my parent is '. get_admin_page_parent() .'.';
}