Auto-generating HTML is eeeevil.

  • First, I’d like to say that I’m very impressed with the latest version of WordPress and I’m looking forward to using it on my website.

    The one thing I’m not impressed with, however, is the template system; specifically, the template tags that automatically generate HTML output. In roughly 5 minutes of thinking about how I wanted to use a simple design of mine with WordPress, I realized how severly limiting the system can actually be.

    For instance, I want a bar near the top of my pages listing all of the “WordPress Pages” horizontally, separated by a “/”. (example image)

    The HTML (combined with CSS, of course) I use to achieve the “etched” look is as follows:

    <div class="dropshadow">
    page 1 /
    page 2 /
    page 3
    <div class="text">
    <a href="...">page 1</a> /
    <a href="...">page 2</a> /
    <a href="...">page 3</a>
    </div>
    </div>

    Unfortunately, this doesn’t seem at all possible with the wp_list_pages() function. It’s the same with the various other wp_list_*() functions. Sure, I could use CSS to make the ul and li tags inline, and force the link color of the “shadow” text to not change when hovered over, but… there’s no way to “glue” the items together as in my image.

    If I’ve missed something, and there’s an easy enough way to do what I want, please let me know. I’m proficient in PHP, so hacking out my own solution isn’t beyond me, but I’d rather not turn a web design project into a web development project.

    At the very least I think the wp_list_*() functions need the following parameters: before_list, after_list, before_item, after_item, and item_glue. These would allow for maximum customizability without the need for a containing loop.

    In the meantime… I would greatly appreciate any suggestions anyone might have.

    Thanks,
    Ryan

Viewing 6 replies - 1 through 6 (of 6 total)

  • I’m not completely following you, but it may be of some help to know that wp_list_pages automatically add the <li></li> around the pages, as well as add a class of .page item. The current page being viewed is given a class of .current_page_item.

    <?php wp_list_pages('title_li='); ?> lists the page names without a title. Wrap the template tag in a div, and then use CSS to list it horizontally, ie, #navigation li {display: inline}.

    If I missed the mark, I apologize, and perhaps you can clarify want you want to accomplish.

    I just re-read your post, and now see what else it is you are trying to accomplish. The trailing slash, I’m not sure about. What if added the slash to the page name when you create it?

    On the contrary, I have exactly what you’re looking for on my website, a button based horizontal bar at the top and a horizontal text bar in the footer, complete with the “current_page_item” CSS styles for both – though separated by: | instead of: /. I did have to do some tinkering, I just basically copied the wp_list_pages functions modified them to do as I wished and then placed them in my handy custom functions pseudo plug-in, once I got over how intimidating I thought it was at first, it was remarkably easy to modify.

    I agree it could possibly be a bit easier, but I think there is a balance between simplistic usability for the novice and customization for the non-novice. I think the balance is about right, but it can be frustrating at times to get the level of customization one might desire, but that’s what the forums are for, there always seems to be an answer kicking around! I’d be more than happy to post a link to my code that I’ve used to get the horizontal links, so just let me know if your interested!

    Cheers,
    Michael.

    Thread Starter cl1mh4224rd

    (@cl1mh4224rd)

    Thanks, Michael. As I said, I’m proficient with PHP, so I can whip something together myself, but I am curious about this part:

    . . .I just basically copied the wp_list_pages functions modified them to do as I wished and then placed them in my handy custom functions pseudo plug-in. . .

    Could you describe that in a little more detail for me? Since it looks like I’ll be rewriting the wp_list_pages() function I’m curious as to what the best method for making it available to my theme would be.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    The way most theme designers do this is to copy the wp_list_pages function into their theme’s functions.php file, rename it to something else (usually themename_nav or something like that), and just change it to do what they want it to do.

    -Create a functions.php file in your theme’s directory.
    -Put the modified function you want to use in there.
    -Use it in all your other theme files as needed.
    -Distribute the functions.php as part of your theme. It’s a standard file.

    BTW, your customization totally neglects the concept of children pages. Pages can be nested, you know. That’s the reason for the way that wp_list_pages is handled.

    Cl1mh4224rd,

    What I did is just place all of my custom code into a custom-functions.php file, including the following comments within the php code:

    /*
    Plugin Name: Custom Functions
    */

    then uploaded that to the plug-ins directory and activated it in the plug-ins panel – perhaps not the most direct way (as the template functions file referenced above would probably be) but this keeps it consistent in my mind, having it with the other plug-ins and then this way it can be easily activated and deactivated via the plugins panel.

    Otto42: Not having any children or the likes in the two horizontal navigation bars was by design, as I didn’t think it was necessary nor did I like having a hierarchical navigation structure in more than one place.

    Cheers,
    Michael.

    Thread Starter cl1mh4224rd

    (@cl1mh4224rd)

    Alright, cool. Thanks, guys. ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Auto-generating HTML is eeeevil.’ is closed to new replies.

Tags