wp_list_pages inline with text surrounding
-
I am creating themes for wordpress and I am using Pages (via wp_list_pages()) for the navigation. I know how to use css to make wp_list_pages inline and styled the way I want, BUT… what I am trying to do is insert text around the names of the pages.
For example, if the page names are About, Contact, and Services… I want the output to look like {about} {contact} {services} or some such display.
I am familiar with the :before and :after pseudo-elements, but they don’t do me much good since IE won’t display them. I know that I may have to create my own php script that pulls the information from the database and inserts text that way, but before I start that I want to make sure I’m not just ignorant and missing some easier way to do this.
I’m creating a series of hyper-minimalist text-only theme designs and getting over this little hurdle will help, especially if I want to make them available to others.
Any suggestions?
-
I couldn’t find any way to do what I wanted using wp_list_pages and I’m really opposed to changing wordpress core files (why would you when the system is so flexible). This is very specific to the layout I wanted, but if anybody else were looking for a similar output, I believe this would work. I’m not sure if you’d run into problems using this in your own theme, but you can try)…
So, I created a function and included it in functions.php:
<?php function nav() { #this bit of code displays a text navigation menu of pages that are published with brackets around the text. Very Clean. #I will be posting my completed theme "somewhere" soon. Hyper-minimalist, text-only. Clean. $sql = "SELECT * FROM wp_posts WHERE post_type='page' && post_status='publish'"; $result = mysql_query($sql) or print('nope').mysql_error(); while ($row = mysql_fetch_array($result)) { ?> <a href="<?php bloginfo('url');?>/?page_id=<?php echo $row['ID'];?>"><?php echo "{".$row['post_name']."} ";?></a> <?php } } ?>
I then put the following code in my header.php:
<div id="nav"> <?php nav(); ?> </div>
Then finally, styled it in css with:
#nav,#nav a:link, #nav a:visited { padding-bottom:10px; color:#000; text-align:center; } #nav a:hover { color:#666; }
- The topic ‘wp_list_pages inline with text surrounding’ is closed to new replies.