wordpress – styling wp_list_pages

[cheese]

Hello all,

This is my first post, quite new to wordpress but I have been a visitor to this website for a while now.

I’m looking for some advice on how I can go about styling my pages menu, I’m going to try and explain what it is I need to do.

I have 6 parent pages: news, information, about us, contact us, media, recruitment

Each of these pages have a few sub pages e.g. contact us > contact form, map, contact details

What I would like to do is have a 2 rows and 3 columns, with each parent page and sub pages separate.

News                         Information                        About US

news sub 1                 information sub 1              about us sub 1

news 2	 	 	 info 2                                info 3







Contact Us                Media                                 Recruitment

contact 1                   media 1                              rec 1

contact 2

Can I use wp_list_pages and some how alter the classes to manipulate the data or am I going to have to write a php function and have it create a table and loop through each?

Any help will be appreciated

[Luminated]

I would just use the new WordPress Menu System (wp_nav_menu function) for something like this (under Appearance tab in Admin panel). You can use the new interface to dictate which pages will be parent pages and which will be sub pages to those parents. The output is in a UL/LI format, so you’ll just need to use CSS to style them to your desires (not tables!). As an example, I used wp_nav_menu function to create both these styles of Menus:

http://www.econesthomes.com

http://www.cruinstitute.net

[jamygolden]

Try this:

CSS:

#pages li{display: block; float: left; margin: 0 15px 0 0;}

That’s just off the top of my head. Let me know if there are any problems.

[cheese]

I don’t understand how I can use css to manipulate the wp_nav_menu output to sit in 2 rows and 3 columns, all the pages will be under the same div and each page will have an individual class.

I am right? I can’t quite get my head around this.

[Luminated]

Can you provide a mockup of what you’re envisioning? I can’t see how you wouldn’t be able to use CSS.

[cheese]

I would like it to be something similar in layout to the bottom of this page:

http://www.ox.ac.uk/

In fact I would quite like to know how to do the banner too but that’s going to have to be the next step after I get my menu working.

Thanks for all the help

[cheese]

I should have added in my last post, I did look at the css for this site, they have used different classes for each section admission, divisions etc.

the nav_menu and list_pages give each page a class of its own.

[TheDoc]

Jamy has just about hit the nail on the head with his suggestion, the only problem with the code he provided is if sections have different amount of subpages you could get an awkward looking pattern.

[Luminated]

“I should have added in my last post, I did look at the css for this site, they have used different classes for each section admission, divisions etc.”

Actually, they don’t. They just use a basic CSS layout for each LI:

#site_menu ul li {

float:left;

margin-right:1%;

position:relative;

width:23.5%;

}

Then they clear to make a new line (which you could just apply a “clear:both” attribute to the LI class you want to start at for the new line)

.newline {

clear:both;

There’s nothing about this style of menu that can’t be replicated using the output you receive from wp_nav_menu. Jamy’s code should help you out.

[Chris Coyier]

Also, nothing wrong with using multiple wp_list_pages() calls, one for each list you need.

[Luminated]

^ Exactly! And on that note, same with wp_nav_menu and each corresponding menu you set up in the admin panel

[cheese]

thanks for all the replies.

I understand what you are saying but by having multiple list calls, or making multiple menus, does this not mean that the menu system won’t be dynamic.

If someone decides to create another main page then that is going to have to be coded into the page.

Having said all that I think I will probably just make separate menus and call each one individually.

[jamygolden]

I don’t understand how I can use css to manipulate the wp_nav_menu output to sit in 2 rows and 3 columns, all the pages will be under the same div and each page will have an individual class.

I am right? I can’t quite get my head around this.

This footer layout is a simple unordered list. If you look at the HTML, you will see that it is put into 2 rows and 3 columns via CSS.

[Author]

Posts