WP List Page with CSS Navigation
Posted Under: TutorialsWhen I was making one of my project, I was wondering how can I make an Active Menu using wp_list_page function. The navigation I made was an image and it has a different angle. I was thinking on how can I make it active using wp_list_page function without using the manual template for each page. And I was thinking what if I should try using the meta function for custom field in WordPress. And when I tested on how to make an active page with wp_list_page and CSS, the end result was a successful and it is time for me to share to you on how I can make an active menu with wp_list_page function with CSS.
Step 1
The code bellow is the function on how to display list of pages of your WordPress blog/cms. And I have separate one menu for the Home page.
<ul>
<li class="page_item page-item-1 <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Back to Main Page">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li');?>
</ul>Step 2
As the default class name for the wp_list_page they have set page_item, page-item-1 and current_page_item. The page-item-1 is set for the menu Home and the rest will be different coz it is dynamic. The number of page-item for the wp_list_page is not random. So lets start the coding for the CSS and I will use three menu for wp_list_page for you to use as sample.
/*Menu for Home*/ #navigation ul li.page-item-1 a{ background:url(images/home.png) no-repeat left top; } #navigation ul li.page-item-1 a:hover{ background:url(images/home.png) no-repeat left bottom; } body#mainPage ul li.current_page_item a{ background:url(images/home.png) no-repeat left bottom; } /*Menu for About*/ #navigation ul li.page-item-2 a{ background:url(images/about.png) no-repeat left top; } #navigation ul li.page-item-2 a:hover{ background:url(images/about.png) no-repeat left bottom; } body#aboutPage ul li.current_page_item a{ background:url(images/about.png) no-repeat left bottom; } /*Menu for Contact*/ #navigation ul li.page-item-3 a{ background:url(images/contact.png) no-repeat left top; } #navigation ul li.page-item-3 a:hover{ background:url(images/contact.png) no-repeat left bottom; } body#contactPage ul li.current_page_item a{ background:url(images/contact.png) no-repeat left bottom; }
Step 3
As what I have in my previous tutorial that we are going to give the body an ID Name. Let’s now make a meta function for custom field of your active menu.
<?php if($body = get_post_meta($post->ID, 'body-id', true)){; ?>
<body id="<?php echo $body; ?>">
<?php }else{; ?>
/*Default ID for the main page*/
<body id="mainPage">
<?php }; ?>Step 4
Login into your WordPress back-end, edit each of your pages to add a Custom Field for the body by inserting body-id in the name field and input a value for the ID name of your body such as what you have made in the CSS.
