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;
}
}
Related
Check the screenshot below; all I want to do is to hide certain ACF fields for custom users in the wordpress backend.
As of ACF 5.0.0 there is an easier way to do this without having to output CSS. If you use the acf/prepare_field hook and return false the field will not render.
<?php
function so37111468_hide_field( $field ) {
// hide the field if the current user is not able to save options within the admin
if ( ! current_user_can( 'manage_options' ) ) {
return false;
}
return $field;
}
add_filter( 'acf/prepare_field/key=MYFIELDKEY', 'so37111468_hide_field' );
?>
The documentation for that filter can be found here: https://www.advancedcustomfields.com/resources/acf-prepare_field/
If you mean to hide it with CSS, then you should insert custom CSS to admin footer area.
For example, you can add such kind of code to your theme's functions.php file:
add_action('admin_footer', 'my_admin_hide_cf');
function my_admin_hide_cf() {
$u=wp_get_current_user();
$user_roles = $u->roles;
if ($user_roles[0]=='CUSTOM_USER_ROLE_NAME'){
echo '
<style>
#acf-FIELD_SLUG_HERE {display:none}
</style>';
}
}
And of course you should replace FIELD_SLUG_HERE and CUSTOM_USER_ROLE_NAME values with correct ones.
F.e. #acf-FIELD_SLUG_HERE can be #acf-url, CUSTOM_USER_ROLE_NAME can be "contributor".
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');
I have created a custom post type of 'portfolio' and page with a template that retrieves all posts matching that custom post type.
The problem is when I drill down into the actual post, the post seems to sit under 'blog' in the main menu highlighting (displays current_page_parent as a class)
The permalink url is correct: www.site.com/portfolio/post-slug
But the menu thinks the parent is 'blog'.
This is obviously a hierarchical issue but I don't know what to do to fix it.
It appears this is an issue with the core Wordpress code; the code that generates the menu classes adds current_page_parent to your Blog page everywhere except when viewing static page templates.
(This has been discussed in passing at http://core.trac.wordpress.org/ticket/13543).
You can however get around this with some custom code using the page_css_class filter. For example, add something along these lines to functions.php (not 100% tested):
function my_page_css_class($css_class, $page) {
if (get_post_type()=='portfolio' || is_page(57)) {
if ($page->ID == get_option('page_for_posts')) {
foreach ($css_class as $k=>$v) {
if ($v=='current_page_parent') unset($css_class[$k]);
}
}
if ($page->ID==57) {
$css_class[]='current_page_parent';
}
}
return $css_class;
}
add_filter('page_css_class','my_page_css_class',10,2);
Replacing 57 with the ID of your portfolios page, of course. That removes current_page_parent when printing the blog page and adds current_page_parent to your portfolios page, when either viewing a single portfolio or viewing the portfolios page itself.
Here is my optimized/extended version of previously suggested solutions, which is pretty much fully automated. No more extra CSS or menu attributes needed.
This version dynamically gets a list of custom post types and if the current post type is a custom post type, then it removes the 'current_page_parent' class from all menu items.
Furthermore it checks each menu item to see if it's for a page with a page template like "page-{custom_post_type_slug}.php", and if so, it'll add the 'current_page_parent' class.
The filter priority is 1, as some themes, replace the current_page_parent/etc. classes with a class like 'active' (eg. 'roots' does this), so this filter needs to execute first.
Lastly, it makes use of 3 static variables since this function is repeatedly called and these (obviously) remain the same through all calls.
function theme_current_type_nav_class($css_class, $item) {
static $custom_post_types, $post_type, $filter_func;
if (empty($custom_post_types))
$custom_post_types = get_post_types(array('_builtin' => false));
if (empty($post_type))
$post_type = get_post_type();
if ('page' == $item->object && in_array($post_type, $custom_post_types)) {
$css_class = array_filter($css_class, function($el) {
return $el !== "current_page_parent";
});
$template = get_page_template_slug($item->object_id);
if (!empty($template) && preg_match("/^page(-[^-]+)*-$post_type/", $template) === 1)
array_push($css_class, 'current_page_parent');
}
return $css_class;
}
add_filter('nav_menu_css_class', 'theme_current_type_nav_class', 1, 2);
PS. Just to point out one shortcoming in all non-CSS solutions I've seen so far, including my own:
Something not taken into account is highlighting the menu item parent/ancestor of an item linking to a page which displays posts of the current custom post type. Consider a custom post type "product" and a menu like:
Home Company News Contact
|
\--About Us
\--Products
"Products" is a page with a template "page-product.php" and shows an overview of posts of type 'product'. It is highlighted due to posted solution. However 'Company' as its parent/ancestor should also be highlighted, but isn't. Something to keep in mind.
WP ticket: http://core.trac.wordpress.org/ticket/16382
function fix_blog_menu_css_class( $classes, $item ) {
if ( is_tax( 'my-cat-tax' ) || is_singular( 'my-post-type' ) || is_post_type_archive( 'my-post-type' ) ) {
if ( $item->object_id == get_option('page_for_posts') ) {
$key = array_search( 'current_page_parent', $classes );
if ( false !== $key )
unset( $classes[ $key ] );
}
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'fix_blog_menu_css_class', 10, 2 );
I did some more looking around on this and found another way of doing this.
add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2);
function current_type_nav_class($css_class, $item)
{
if (get_post_type() === 'portfolio') {
$current_value = 'current_page_parent';
$css_class = array_filter($css_class, function ($element) use ($current_value) {
return ($element != $current_value);
});
}
$post_type = get_query_var('post_type');
if ($item->attr_title !== '' && $item->attr_title === $post_type) {
array_push($css_class, 'current_page_parent');
};
return $css_class;
}
I got some help form this post and then modified it to also remove the "current_page_parent" class from the blog page.
https://wordpress.stackexchange.com/questions/3014/highlighting-wp-nav-menu-ancestor-class-w-o-children-in-nav-structure/3034#3034
Cordially
Vayu
As explained at https://core.trac.wordpress.org/ticket/16382, .current_page_parent matches "anything that isn't a page" for the sake of backwards compatibility (bear in mind that this was considered backwards 10 years ago...) so themes nowadays really shouldn't still be using it.
So the simplest solution, and the most efficient (since unlike previous answers it doesn't require running extra code on every page load), is to modify your theme's CSS to replace use of the .current_page_parent class selector with .current-menu-parent, which does the right thing. (NB underscores vs hyphens.)
If you are using a third-party theme and don't want to modify it directly, then you can overwrite its properties in your own stylesheet. For example, if your theme has:
.current_page_parent > a {
border-bottom: 4px solid blue;
}
then in your child theme's stylesheet you would do this to cancel out its effects, and apply them to the correct class:
.current_page_parent > a {
border-bottom: transparent !important; /* Cancel out incorrect styling */
}
.current-menu-parent > a {
border-bottom: 4px solid blue; /* Add styling correctly */
}
This is just an example - the correct way will depend on how your theme is styling these links.
Here is a solution that worked for me, without having to define my custom post type or menu id or page id in the code:
http://dtbaker.net/web-development/how-to-stop-wordpress-automatically-highlighting-the-blog-page-in-the-menu/
function dtbaker_wp_nav_menu_objects($sorted_menu_items, $args){
// this is the code from nav-menu-template.php that we want to stop running
// so we try our best to "reverse" this code wp code in this filter.
/* if ( ! empty( $home_page_id ) && 'post_type' == $menu_item->type && empty( $wp_query->is_page ) && $home_page_id == $menu_item->object_id )
$classes[] = 'current_page_parent'; */
// check if the current page is really a blog post.
//print_r($wp_query);exit;
global $wp_query;
if(!empty($wp_query->queried_object_id)){
$current_page = get_post($wp_query->queried_object_id);
if($current_page && $current_page->post_type=='post'){
//yes!
}else{
$current_page = false;
}
}else{
$current_page = false;
}
$home_page_id = (int) get_option( 'page_for_posts' );
foreach($sorted_menu_items as $id => $menu_item){
if ( ! empty( $home_page_id ) && 'post_type' == $menu_item->type && empty( $wp_query->is_page ) && $home_page_id == $menu_item->object_id ){
if(!$current_page){
foreach($sorted_menu_items[$id]->classes as $classid=>$classname){
if($classname=='current_page_parent'){
unset($sorted_menu_items[$id]->classes[$classid]);
}
}
}
}
}
return $sorted_menu_items;
}
add_filter('wp_nav_menu_objects','dtbaker_wp_nav_menu_objects',10,2);
I want to override the theming of only one (custom) menu. I can do this with phptemplate_menu_tree() but - of course - it overrides the rendering of all menus.
I've tried returning FALSE (an obvious technique IMO) if the menu is not the specific one I want to override - but this doesn't cause the overridden theme function to be called.
My only alternative (when the menu is anything other than the specific one) is to call the overridden function from within phptemplate_menu_tree() - but this seems to defeat the whole point of the override system, since the default rendering function will be hard-coded therein.
I hope the explanation is clear, and any help is greatly appreciated - tks.
UPDATE
For the sake of future reference, I'll explain how I solved this.
First off, the menu rendering starts with this function in menu.module:
function menu_block($op = 'list', $delta = 0) {
$menus = menu_get_menus();
// The Navigation menu is handled by the user module.
unset($menus['navigation']);
if ($op == 'list') {
$blocks = array();
foreach ($menus as $name => $title) {
// Default "Navigation" block is handled by user.module.
$blocks[$name]['info'] = check_plain($title);
// Menu blocks can't be cached because each menu item can have
// a custom access callback. menu.inc manages its own caching.
$blocks[$name]['cache'] = BLOCK_NO_CACHE;
}
return $blocks;
}
else if ($op == 'view') {
$data['subject'] = check_plain($menus[$delta]);
$data['content'] = menu_tree($delta);
return $data;
}
}
If you only want to override how individual item (links) are rendered then you can use the theme system (there are loads of references on how do this) - but if you want complete control on how the entire menu tree is rendered (for example, wrapping the output in nested DIVs so it can be centred on the page) then there is no way to override menu_block().
Therefore, I removed the menu I wanted to render differently from the administer blocks page (site building->blocks) and rendered the menu directly in my page.tpl.php using code something like this: (angle brackets removed)
$m = menu_tree_page_data('my-menu-id');
$o = "DIV";
foreach($m as $k => $v){
$o .= "SPAN {$v['link']['title']} /SPAN";
}
$o .= "/DIV";
echo $o;
I hope this helps.
I've had mixed success doing template.php menu overrides to force CSS classes and ids or HTML into the output.
You could make use of Block Theme when enabling the menu as a block, but I've never tried it.
http://drupal.org/project/blocktheme
If you want to tackle the template way, here are the zen menu override funcitons...
function zen_menu_item_link($link) {
if (empty($link['localized_options'])) {
$link['localized_options'] = array();
}
// If an item is a LOCAL TASK, render it as a tab
if ($link['type'] & MENU_IS_LOCAL_TASK) {
$link['title'] = '<span class="tab">' . check_plain($link['title']) . '</span>';
$link['localized_options']['html'] = TRUE;
}
return l($link['title'], $link['href'], $link['localized_options']);
}
function zen_menu_local_tasks() {
$output = '';
if ($primary = menu_primary_local_tasks()) {
$output .= '<ul class="tabs primary clear-block">' . $primary . '</ul>';
}
if ($secondary = menu_secondary_local_tasks()) {
$output .= '<ul class="tabs secondary clear-block">' . $secondary . '</ul>';
}
return $output;
}
You could use sections module, or look at how it switches theme for certain menu-items.
what I did was register a new theme function in my template.php called primary_links (because I wanted to only customize this menu in certain way) created the function mytheme_primary_links() in my template.php refreshed the cache so Drupal would add my theme function to the system then changed theme function on primary_links from links to my custom theme function primary_links - this allows me to customize only this 1 menu - could you do this and hook into where ever to change the theme function being called for your links?
Chris
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() .'.';
}