Support » Fixing WordPress » format css to create columns for the pages widget

  • Hi,
    I am using the pages widget as a sitemap in the footer of my theme.

    It works and looks ok, but it’d be cooler if it listed each top level pages as an inline style (across the footer left to right) and then, any time it gets to a page that has subpages, it lists them downwards.

    Does anyone know css well enough to produce this kind of styling. The problem lies in that the sitemap is autogenerated by wordpress, so i don’t have much control over how it will look.


Viewing 8 replies - 1 through 8 (of 8 total)
  • That is totally doable, but not with a widget.

    You would have to edit your the footer file of your theme and add some CSS to your stylesheet. How exactly you would go about this depends on your theme.

    If you can tell me what theme you are using, and post a link to your site, I can give you a better idea of what you need to do.

    Hi Jleuze,
    Thanks for the reply.
    My site is at :
    and the theme I am using is called simpleX but the theme has been heavily changed.

    If you are using firefox developers toolbar and usig the edit css option, then the css for the footer is in the style.css file and the footer code is about 1 third of the way down in a section called footer.

    Thanks for looking at that, I appreciate it. High 5 from Perth, Australia

    OK, you can use exactly the same code that is generating your page links in the header to generate them in your footer, you just need to style them differently.

    Take this chunk from your header code:

    <ul id="page-list"  class="clearfix"><li <?php if(is_home()){ echo 'class="page_item current_page_item"'; } else { echo 'class="page_item"'; } ?>><a href="<?php bloginfo('url') ?>" title="Home" >Home</a></li><?php wp_list_pages('title_li='); ?></ul>

    Remove the sitemap from your footer and replace it with that code. You will want to change the ids and classes in that bit of code, so that you can style the bottom list differently than the top list.

    Take a look at the code in the “Page Menu CSS” of your stylesheet. You will need to use some of that code to the classes and ids of your bottom nav to make it inline and clean it up a bit. But the majority of it you won’t need if you aren’t going to have drop downs in the footer nav.

    Good luck anti!

    Thanks for taking that time to check it out.
    I have to bail but will look at it later tonight.

    Thanks again,


    I see, that makes a lot of sense because the top nav, if all the drop downs were…down… would look like what i am trying to achieve.

    I’ll mess around with the css and change the ids tomake them footer unique.

    Thanks Jleuze that helps me out a lot. Good to get a different perspective. I think I have been working on it for so long that I didn’t see that. You are also fairly smart to have seen that so quickly too.

    Thanks again man, I’ll let you know how it goes.
    Are you in web design/development?
    Where are you located and how much work have you got on right now?


    Yes exactly, if you just leave out the CSS that is hiding the the links in the drop downs, you should get what you are looking for.

    No problem, sometimes you just need a fresh perspective!

    Yeah, I’m a web designer in the States(Minnesota), I try to keep pretty busy, but it comes and goes 😉

    Hey Jleuze,

    I tried what you suggested and it worked fine. Thanks.
    The only prob I ran in to is that some of my drop down sub nav titles were very long (eg: websites – design & development),

    so when this goes horizontally, it takes up so much room that when the next parent title is placed in the next column, the end of the footer is already there so the whole menu has to wrap. Does that make sense?

    Thanks for your help. I future sites this will come in handy!


    No problem, I think if you just make the font of that list smaller, or the blocks wider, it should fit.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘format css to create columns for the pages widget’ is closed to new replies.