Archive for August, 2010
Modifying the output of Wordpres’ template tag wp_list_pages
I’ve noticed a lot of traffic to my previous post on this subject: How to style wp_list_pages, which means that there is a lot of interest in this subject.
I recommend reading the previous article as it might explain certain things which I am going to write about here.
For the template that I was recently working on, I needed a modified output of the default <?php wp_list_pages(‘arguments’); ?> tag, in a way that it would change the link into and anchor. For example, instead of this:
<li class="page_item page-item-1"> <a title="thisisanexample" href="http://www.thisisanexample.com">this is an example</a> </li>
into this:
<li class="page_item page-item-1"> <a title="thisisanexample" href="#thisisanexample">this is an example</a> </li>
If you are wondering what are anchors for: these are the shortcuts that take you from one part of a page to another part of the same page.
Here’s what I had to start with:
So, this is how to do it…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php $my_pages = wp_list_pages('echo=0&title_li=&child_of=5&depth=1'); $pieces = explode('"', $my_pages); $i = 5; $j = 3; $limit = count($pieces); for (;$i<$limit;) { $tmp1 = '#'.$pieces[$j]; $pieces[$i] = $tmp1; $i = $i+6; $j = $j+6; } $tmp2 = implode('"',$pieces); echo $tmp2; ?> |
from:
$my_pages = '<li class="page_item page-item-1"><a title="example title" href="http://www.examplelink.com">example title</a></li>'
into:
pieces[0] = "<li class=" pieces[1] = "page_item page-item-1" pieces[2] = "><a title=" pieces[3] = "example title" pieces[4] = " href=" pieces[5] = "http://www.examplelink.com" pieces[6] = ">example title</a></li>"
$limit = count($pieces);
$tmp1 = '#'.$pieces[$j]; $pieces[$i] = $tmp1;
And that is it.
It might happen that the wp_list_pages function outputs the title and the link swapped (link comes before the title), then just swap the values of $i and $j, and it should work.
Oh, and it only works with the unmodified output of the <?php wp_list_pages(‘arguments’); ?> tag – it might behave differently when used together with what I have discussed in the previous link on this subject: How to style wp_list_pages
As usual, let me know what you think about this hack (especially since it isn’t the only way of doing it) and ask questions in the comments if you need help.
Source: Wantusiak Maciej
Applying styling to dynamically generated lists (or any content) in WordPress.
Recently, I was in a need of changing the default outcome of the <?php wp_list_pages(‘arguments’); ?> tag in WordPress – as you’ll see, it’s a really simple procedure. I needed to change the wp_list_pages outcome, but this technique can be applied to other tags as well.
On default, after calling this script, we recieve something along these lines:
<ul> <li class="page_item current_page_parent"> <a href="#">Link</a> </li> <li class="page_item"> <a href="#">Link2</a> </li> </ul>
On some ocasions you will probably wish to add a <class> or a <span> to each link. Too bad that the wp_list_pages() tag doesn’t take as arguments strings to go before and after each link.
So, this is the way that you can go around this problem:
1 2 3 4 5 6 7 8 9 10 |
<?php $my_pages = wp_list_pages('echo=0&title_li='); $var1 = '<a'; $var2 = '<span class="testClass"><a'; $var3 = '</a'; $var4 = '</a></span>;'; $my_pages = str_replace($var1, $var2, $my_pages); $my_pages = str_replace($var3, $var4, $my_pages); echo $my_pages; ?> |
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul> <li class="page_item current_page_parent"> <span class="testClass"> <a href="#">Link</a> </span> </li> <li class="page_item"> <span class="testClass"> <a href="#">Link2</a> </span> </li> </ul> |
And this is it! Simple yet powerful. This litlle trick can have many applications (like, for example, creating a hover effect with some script on the menu) and it is up to you what to do with it next. If you are going to use it for something – it’s always appreciated if you could share your ideas.
Update! I’ve noticed that a lot of interest is paid to this post. If some of you would like me to explain something in more detail, then ask for it in a comment. I hope that I will be able to help 🙂
Update 2! I have written a new post about modifying the outcome of the wp_list_pages tag – have a look here: WordPress: how to dynamically modify the output of the wp_list_pages tag
Take care!
Maciek
Q1: How would one style an element inside a link?
Here is a little modification of the script to include styling of parts of a link, as suggested by Ben, although Ben’s problem was a little more complex.
The problem is how to style one part of a link, for example: The link is “WordPress Rocks!” and we want to apply style only to the word “WordPress”, to be… mmmm…. bold and green! That’s how to do it:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php $my_pages = wp_list_pages('echo=0&title_li='); $var1 = '<a'; $var2 = '<span class="testClass"><a'; $var3 = '</a'; $var4 = '</a></span>;'; $var5 = 'Wordpress'; $var6 = '<h10>Wordpress</h10>'; $my_pages = str_replace($var1, $var2, $my_pages); $my_pages = str_replace($var3, $var4, $my_pages); $my_pages = str_replace($var5, $var6, $my_pages); echo $my_pages; ?> |
As you can see, I have wrapped the word “WordPress” in <h10> tag. Why not <span>? Because for what I know it creates a bunch of gibberish as outcome (try it and you’ll know it). <h10>, or any <h> tag which is not being used, is a simpler solution.
Don’t forget to style it in your CSS file. If the <h> tag breaks your line, use “display:inline;” in your style sheet to fix it.
h10 { font-weight: bold; color: Green; display: inline; }
Oh, and I am assuming that the word “WordPress” is a constant output from the wp_list_pages(). This means, that wp_list_pages() always outputs the word “WordPress”.
Q1: How to add a line between to <li> elements?
Here’s how:
1 2 3 4 5 6 7 |
<?php $my_pages = wp_list_pages('echo=0&title_li='); $var1 = '/li><li'; $var2 = '/li> whatever you want to add here <li'; $my_pages = str_replace($var1, $var2, $my_pages); echo $my_pages; ?> |
UPDATED!!! 25.04.2009
Q2: How do you create a dynamic submenu?
Marc Wiest was kind to share wit us a solution to this problem, based on the above hack and work by Gabriel Svennerberg.
Here is how to create a dynamic submenu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?php $has_subpages = false; // Check to see if the current page has any subpages $children = wp_list_pages('&child_of='.$post->ID.'&echo=0'); if($children) { $has_subpages = true; } // Reseting $children $children = ""; // Fetching the right thing depending on if we're on a subpage or on a parent page (that has subpages) if(is_page() && $post->post_parent) { // This is a subpage $children = wp_list_pages("title_li=&include=".$post->post_parent ."&echo=0"); $children .= wp_list_pages("title_li=&child_of=".$post->post_parent ."&echo=0"); } else if($has_subpages) { // This is a parent page that have subpages $children = wp_list_pages("title_li=&include=".$post->ID ."&echo=0"); $children .= wp_list_pages("title_li=&child_of=".$post->ID ."&echo=0"); } ?> <!--Check to see if we have anything to output--> <?php if ($children) { ?> <div class="subNav"> <ul> <li> <!--modified wp_list_pages--> <?php $var1 = '<a'; $var2 = '<span class="testClass"><a'; $var3 = '</a>'; $var4 = '</a></span>'; $children = str_replace($var1, $var2, $children); $children = str_replace($var3, $var4, $children); echo $children; ?> <!--end of modified wp_list_pages--> </li> </ul> </div><!--subNav--> <?php } ?> |
I didn’t get a chance to test out this code (but it looks alright to me and it works for Marc), so if you run into any problems, let me know in the comment.
Also you are welcome to share your problems and solutions.
Again, thanks Marc!
If you found this post interesting, have a look at the one about dynamically modifying the wp_list_pages output
Source: Wantusiak Maciej
M | T | W | T | F | S | S |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |