WordPress.org

1. jl2424
   Member
   Posted 2 years ago #

   When using
   

   wp_page_menu(array(
        'show_home' => 'Blog'
   ));

   WordPress will generate a list of page links and add a link to the homepage with title "Blog" at first link. While surfing the homepage ("Blog") the generated HTML will be as followed:

   <ul>
     <li class="current_page_item">
       <a href="http://localhost/wordpress">
          Blog
       </a>
     </li>
     <li class="page_item page-item-2">
       <a href="http://localhost/wordpress">
          Page 2
       </a>
     </li>
     <li class="page_item page-item-4">
       <a href="http://localhost/wordpress">
          Page 3
       </a>
     </li>
   </ul>

   So WordPress correctly adds the CSS class "current_page_item" to the link for the homepage. But when being on another page then the homepage it will not add the CSS class "page_item" to the homepage link so it stays empty:

   <ul>
     <li>
       <a href="http://localhost/wordpress">
          Blog
       </a>
     </li>
   ...
   </ul>

2. jl2424
   Member
   Posted 2 years ago #

   This, of course, can break your design if you highlight the link to the current page differently than the other page links using the current_page_item and page_item classes.

   Workaround:
   In your CSS, instead of using the page_item class, style all page items by accessing their element directly instead of using the class name. Afterwards, overwrite the styles for the current page by accessing it through the current_page_item class directly (which is added by WordPress correctly). Take care of the following: The overwriting will only apply, if you access the current page styles through the element path and the current_page_item class directly. This is due to the cascading of CSS: As you can overwrite styles (called "cascading") CSS has to know which style definition applies in case that more than one definition was given. CSS rates every definition to know which definition is more important and should apply. Accessing an element directly through the element path is rated by CSS higher then directly by its class name - even if this definition is added after a first defintion.

   Working Example:
   

   /* -- PHP -- */
   <?php wp_page_menu(array(
      'menu_class' => 'pageMenu', // the page menu will be placed inside a <div> with this class
      'show_home' => 'Blog'
   ));
   ?>
   
   /* -- CSS -- */
   /* The hyperlink to a page */
   .pageMenu ul li a {
      color: white;
   }
   
   /* Overwriting the style for current page link */
   .pageMenu ul li.current_page_item a {
      color: #F7931E;
   }
   
   /* This won't work: */
   .current_page_item a {
      color: #F7931E;
   }

3. carlafranca
   Member
   Posted 2 years ago #

   Hopefully this will help others.

   The css doesn't word because there is a gap in the class name.
   class="page_item page-item-4"

   To fix it just go to:
   wp-includes
   file : class.php
   line: 1175
   (or look for $css_class = array('page-item-', 'page-item-'.$page->ID);)

   delete the first 'page_item'

   i.e.
   $css_class = array('page-item-'.$page->ID);

   The class will be:
   class="page-item-4"

4. Tom Ryan Design
   Member
   Posted 2 years ago #

   In which file does this:

   wp_page_menu(array(
        'show_home' => 'Blog'
   ));

   ...appear?

Topic Closed

This topic has been closed to new replies.