I know this is going to be simple but I can't work it out.
I want to create a nav in the footer listing each page and it's child pages.
It will look something like this
<ul>
<li>Parent</li>
<li>Child One</li>
<li>Child Two</li>
<li>Child Three</li>
</ul>
I'm using this code to do it.
<div id="footerLinks">
<?php
$args = array(
'sort_column' => 'menu_order',
'parent' => 0,
);
$pages = get_pages($args);
foreach($pages as $page){
?>
<ul>
<li>
<?php echo $page->post_title;?>
</li>
<?php
wp_list_pages('title_li=&depth=1&child_of='.$page->ID.'');
?>
</ul>
<?php
}
?>
</div>
My problem is getting the permalink to the parent page.
<?php echo $page->post_title;?>
How do I get the permalink in this situation?
Maybe you can do something like this:
<? echo get_permalink($page->post_parent); ?>
Related
I am new in Wordpress so I hope I will be very explicit in the following description. Right now I`m trying to create something like https://getbootstrap.com/docs/5.1/components/navs-tabs/ but in Wordpress using bootstrap 5. In the tabs title I want to show the title of the post and in the tab content will be the_content().Thanks in advance !
The ul needs to be outside of the while loop so that you only have a single navigation component. Right now it is creating a separate navigation for every oracion. Try the following:
<div class="col-md-9">
<?php
$wpb_all_query = new WP_Query(array(
'post_type' => 'post',
'category_name' => 'orar',
'post_status' => 'publish',
)); ?>
<?php if ($wpb_all_query->have_posts()) : ?>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<?php while ($wpb_all_query->have_posts()) :
$wpb_all_query->the_post(); ?>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false"><?php $wpb_all_query->the_title(); ?></button>
</li>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"><?php $wpb_all_query->the_content(); ?></div>
</div>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php
else : ?>
<p><?php ('Sorry, no posts matched your criteria.'); ?></p>
<?php
endif; ?>
</div>
I'm converting an html site to wordpress and am having an issue with the menus. I have created the separate menu locations with the php code in the templates
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
);
wp_nav_menu($args);
?>
</div>
<div class="footerNav">
<h3>Services</h3>
<?php
$args = array(
'theme-location' => 'footerServ',
);
wp_nav_menu($args);
?>
</div>
And the functions.php has this code
function register_my_menus() {
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footerServ' => __('Footer Services'),
'footerWork' => __('Footer Our Work'),
'footerLegal' => __('Footer Legal'),
'footerInc' => __('Footer Inc'),
));
}
add_action( 'init', 'register_my_menus' );
main menu config looks like this -
Main Menu Wordpress Config
footer menu config looks like this -
FooterMenu Wordpress Config
The resulting html looks like this for the main menu
<nav role="navigation" id="MainNav" class="group">
...
<div id="NavItems">
<div class="menu-footer-services-container">
<ul id="menu-footer-services" class="menu">
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95">
Mold Manufacturing
</li>
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96">
Injection Molding
</li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94">
Thermoforming
</li>
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93">
Plastic Fabrication
</li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91">
Custom Design
</li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92">
Assembly
</li>
</ul>
</div>
</div>
...
The footer menu has the same class and ul.
I have done everything I can think of, and am almost certain the configuration is correct inside of wordpress, and haven't found any issues with my code.
In summary, My main menu is being overwritten by the footer menu, despite having different locations set, and names. The wordpress dashboard has the correct configuration for what I want. However the result shows my main menu having the footer menu class and instead of 'home'... it shows 'mold manufacuring'....
I was following this video (in comments) to set up my navigation, and followed his actions exactly.
It's almost as if wordpress is only allowing me to show 1 menu, despite allowing me to configure several.
Thank you in advance for any help.
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
);
wp_nav_menu($args);
?>
</div>
Looks like the issues lies in the 'theme-location', seems to work if changed to 'theme_location' instead. However I will stay with my word-around because it would take more time to change it back for equal functionality.
If anyone is interested, the workaround looks like this
<div id="NavItems">
<ul>
<?php
$servMenu = wp_get_nav_menu_items('(wordpress number for your menu');
foreach ($servMenu as $item) {
$pages = get_pages();
$class = "";
foreach ($pages as $page) {
if ($page->post_title == $item->title) {
if (is_page($page->ID)) {
$class = "current-menu-item";
}
break;
}
} ?>
<li class="<?php echo $class; ?>">
<a href="<?php echo $item->url; ?>">
<?php echo $item->title; ?>
</a>
</li>
<?php }
?>
</ul>
</div>
Use menu_class in args like this it will take as ul class of menu.
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
'menu_class' => 'primary-class',
);
wp_nav_menu($args);
?>
</div>
<div class="footerNav">
<h3>Services</h3>
<?php
$args = array(
'theme-location' => 'footerServ',
'menu_class' => 'footer-class',
);
wp_nav_menu($args);
?>
</div>
I've been trying to do this all weekend, I'm going round in circles now.
I want to list all pages and their children in separate ul's
The page setup is like this
HOME ABOUT CONTACT
Who we are Where we are
What we do How to find us
How we do it
I want to output it like this
<ul>
<li>Home</li>
</ul>
<ul>
<li>About</li>
<li>Who we are</li>
<li>What we do</li>
<li>How we do it</li>
</ul>
<ul>
<li>Contact</li>
<li>Where we are</li>
<li>How to find us</li>
</ul>
This code below will give me the top pages in separate ul's
<?php
$args = array(
'sort_column' => 'menu_order',
'parent' => 0,
);
$pages = get_pages($args);
foreach($pages as $page){
?>
<ul>
<li>
<?php
echo $page->post_title;
?>
</li>
</ul>
<?php
}
?>
I'm now trying to add the child pages to the same ul
I'm thinking something like this but this gives me all the pages in each ul
<?php
$args = array(
'sort_column' => 'menu_order',
'parent' => 0,
);
$pages = get_pages($args);
foreach($pages as $page){
?>
<ul>
<li>
<?php
echo $page->post_title;
wp_list_pages('title_li=&depth=0&child_of'.$page->ID.'');
?>
</li>
</ul>
<?php
}
?>
Is there a way to say all children of this page.
Any help would be greatly appreciated.
wp_list_pages('title_li=&depth=0&child_of'.$page->ID.'');
you'r missing the "=" after "child_of"
wp_list_pages('title_li=&depth=0&child_of='.$page->ID.'');
The nicer way to do this is to create a custom walker, but this is more complicated
http://codex.wordpress.org/Function_Reference/Walker_Class
I have the following structure of categories in my Opencart
<ul>
<li class="bu">
PARENT 1
<ul>
<li>
CHILD 1
<ul>
<li> - GRANDCHILD 1</li>
<li> - GRANDCHILD 2</li>
<li> - GRANDCHILD 3</li>
</ul>
</li>
<li>
CHILD 2
<ul>
<li> - GRANDCHILD 1</li>
<li> - GRANDCHILD 2</li>
<li> - GRANDCHILD 3</li>
<li> - GRANDCHILD 4</li>
</ul>
</li>
</ul>
</li>
<li class="bu">
PARENT 2
//....ETC
How can I give Parent, Child and Grandchild different styling (color, weight, decoration)?
I was trying to make it work with JS searching for UL and applying class depending on position, but result is messy and incorrect..
Any ideas? Thanks!
The view file:
<ul>
<?php foreach ($categories as $category) { ?>
<?php if($category['children']) { ?>
<li class="bu">
<?php } else { ?>
<li class="onit" >
<?php } ?>
<?php if ($category['category_id'] == $category_id) { ?>
<a href="<?php echo $category['href']; ?>" class="active" ><?php echo $category['name']; ?></a>
<?php } else { ?>
<?php echo $category['name']; ?>
<?php } ?>
<?php if ($category['children']) { ?>
<ul>
<?php foreach ($category['children'] as $child) { ?>
<li class="onit" >
<?php if ($child['category_id'] == $child_id) { ?>
<?php echo $child['name']; ?>
<?php } else { ?>
<?php echo $child['name']; ?>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
You could search and modify the php file that generates this form. Than complete the code with some css classes.
Answer for edited question:
If you watch the href you can see that the path part has the same number of variables in the same generation:
Parent: path=205
Child: path=205_66
Grandchild: path=205_66_230
You could get this part of the text, and depending on the variable number do the formating. So condition would look like this:
if(count(explode("_",strstr($child['href'],"path=")))==1)
//Do the formating for parent.
Use strstr() to delete before the path= part. You can leave out this if there aren't '_' characters before path=.
With explode() you can split the string to an array with the '_' character.
Than count() will count the elements of the array.
Compare with 1 for parents, 2 for childs and with 3 for grandchilds.
Otherway I assume by rewriting the code there should be a better way to reach this goal.
I think you could maybe do it like this:
ul li {
color:red;
}
ul li > ul li {
color:blue;
}
ul li > ul li > ul li {
color:green;
}
I want to display my wordpress posts in a category in two divs. So for example:
<ul id="left">
<li class="post">POST 1</li>
<li class="post">POST 3</li>
<li class="post">POST 5</li>
<li class="post">POST 7</li>
</ul>
<ul id="right">
<li class="post">POST 2</li>
<li class="post">POST 4</li>
<li class="post">POST 6</li>
<li class="post">POST 8</li>
</ul>
So want I need to do is tell the query_posts to somehow start spitting out the first 4 posts oddly and then evenly for each div. I don't want to have two seperate WP_Queries as this is a category.php file and needs to have the default loop. Not quite sure how to do this.
Any help much appreciated.
I have not test this before, this is not the best way but a solution
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
$count++;
if( $count % 2 ) {
$left_array[] = array( 'content' => get_the_content('more...') );
}
else {
$right_array[] = array( 'content' => get_the_content('more...') );
}
?>
<?php endwhile; ?>
<ul id="left">
<?php
foreach( $left_array as $post ) {
echo '<li class="post">'.$post['content'].'</li>';
}
?>
</ul>
<ul id="right">
<?php
foreach( $right_array as $post ) {
echo '<li class="post">'.$post['content'].'</li>';
}
?>
</ul>
<?php else : ?>
<?php endif; ?>
or the same idea, but another way:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<ul id="left">
<?php
$count++;
if( $count % 2 ) {
}
else {
?>
<li class="post"><?php the_content('more...'); ?></li>
<?php
}
?>
</ul>
<ul id="right">
<?php
$count++;
if( $count % 2 ) {
?>
<li class="post"><?php the_content('more...'); ?></li>
<?php
}
?>
</ul>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
How about preconstructing the two lists: (I can't recall the WP query syntax, so it's pseudo-PHP:)
<?php
$list1 = array();
$list2 = array();
$i=0;
foreach($query_results as $res) {
if(($i++)&1) $list2[] = $res;
else $list1[] = $res;
}
?>
Now list1 contains the first, third, ... item and list2 contains the second, fourth, ...
You can then print them in the two divs as you wish.
(On a tangent: Does PHP have any succinct way to do what the above code does? Python has the stepped slicing syntax...)
If your goal is to have a two-column list of posts, it would be much easier to just output the posts in one list, and then use CSS to give the visual appearance of two columns using float, for instance:
width: 50%;
float: left;