I posted this question on the wordpress forum but got no hits. Perhaps one of you might be able to point me in the right direction.
I am putting together a wp theme for a site I am working on. I want to get the layout to match the rest of the site as closely as possible and am running into trouble using the wp_list_pages/categories/bookmarks/etc() methods. I read through the documentation, but really don't see how to translate that into something that will work for me.
Calling the function with no args I get:
<li class="pagenav">Pages
<ul>
<li class="page_item page-item-2">About</li>
<li class="page_item page-item-5">Parent 1
<ul>
<li class="page_item page-item-10">Child 1
<ul>
<li class="page_item page-item-26">Grandchild 1</li>
</ul>
</li>
<li class="page_item page-item-16">Child 2</li>
</ul>
</li>
<li class="page_item page-item-7">Parent 2
<ul>
<li class="page_item page-item-22">Child 3</li>
<li class="page_item page-item-24">Child 4</li>
</ul>
</li>
<li class="page_item page-item-14">Parent 3
<ul>
<li class="page_item page-item-18">Child 5</li>
<li class="page_item page-item-20">Child 6</li>
</ul>
</li>
</ul>
</li>
Whereas I would like something more like:
<div class="nav-link">Pages
<div id="Pages_children">
<div class="nav-link">About</div>
<div class="nav-link">Parent 1
<div id="Parent 1_children">
<div class="nav-link">Child 1
<div id="Child 1_children">
<div class="nav-link">Grandchild 1</div>
</div>
</div>
<div class="nav-link">Child 2</div>
</div>
</div>
<div class="nav-link">Parent 2
<div id="Parent 2_children">
<div class="nav-link">Child 3</div>
<div class="nav-link">Child 4</div>
</div>
</div>
<div class="nav-link">Parent 3
<div id="Parent 3_children">
<div class="nav-link">Child 5</div>
<div class="nav-link">Child 6</div>
</div>
</div>
</div>
</div>
Is there a way for me to accomplish that with the args system? If not, is it possible for me to request an array from wp_list_TYPE() with the links and titles?
Is there a better way entirely to go about doing something like this?
Try looking at get_posts, which returns an array instead. Then you can loop through the array and print whatever you want from it.
For example:
<?php $posts = get_posts("numberposts=5&order=DESC&orderby=date"); ?>
<h5>Latest posts</h5>
<?php foreach($posts as $post): ?>
<?php setup_postdata($post); ?>
<div class="content">
<a class="title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<span style="float:right" class="date"><?php the_time(__('F jS, Y', 'inove')); ?></span>
</div>
<?php endforeach; ?>
Related
I have a screen like this and I get this image using 3 separate divs and ul-li. The data inside are fixed data that I wrote manually.
<div class="cards">
<div class="card shadow">
<ul>
<li class="pack">1 Points</li>
<li id="one" class="price bottom-bar">$1</li>
<li class="bottom-bar">1 Points</li>
</ul>
</div>
<div class="card active">
<ul>
<li class="pack">2 Points</li>
<li id="two" class="price bottom-bar">$2</li>
<li class="bottom-bar">2 Points</li>
</ul>
</div>
<div class="card shadow">
<ul>
<li class="pack">3 Points</li>
<li id="two" class="price bottom-bar">$3</li>
<li class="bottom-bar">3 Points</li>
</ul>
</div>
</div>
There is no problem so far, but when I bring this data from the database and retrieve it with foreach, that is, when it creates the ul-li tags itself, it gets the following image.
<div class="cards">
<div class="card shadow">
<ul>
<?php
foreach($package_types as $package_type){
echo '<li class="pack">'.$package_type['package_name'].'</li>';
echo '<li class="price bottom-bar">₺'.$package_type['amount'].'</li>';
echo '<li class="bottom-bar">'.$package_type['package_name'].'</li>';
}
?>
</ul>
</div>
</div>
How can I get the image in the first photo when I get the data with Foreach?
Try this
<div class="cards">
<?php
foreach ($package_types as $package_type) { ?>
<div class="card shadow">
<ul>
<?php
echo '<li class="pack">'.$package_type['package_name'].'</li>';
echo '<li class="price bottom-bar">₺'.$package_type['amount'].'</li>';
echo '<li class="bottom-bar">'.$package_type['package_name'].'</li>';
?>
</ul>
</div>
<? } ?>
</div>
You'll have to decide which one of those div tags with class card will also have the class active instead of the class shadow.
I'm editing a website, and this site uses data-groups, of which I'm not familiar (enough) with.
The current result is:
• In K2, I have items in categories, subcategories, and sub-subcategories.
• On the page of the items, there is a horizontal lign, showing each subcategory.
• On that page, I added a dropdown menu under one subcategory. In that dropdown, I have a few sub-subcategories. I would like that when I click on that sub-subcategory, it will show the items from that sub-subcategory.
What do I need to do to make this work?
If I need to post more, feel free to ask, and sorry.
I'll try to explain as good as possible:
Category.php
defined('_JEXEC') or die;
?>
<p style="text-align:center;font-weight:bold;font-size:120%;padding:1%;background:#007dbe;color:white;margin:1% 0 0.95% 0;">OUTLET</p>
<!--<img src="https://i.ibb.co/3dk77DK/outlet3.png" style="margin: 0 0 1% 0;">-->
<div class="centered-pills" style="width:98%;margin:0 auto;background:#474747;">
<ul class="nav nav-pills" id="outlet">
<li class="filterTitle">Filter op:</li>
<li class="active" id="pointer">All</li>
<li class="active" id="drop-a-down">Example
<ul class="drop-a-content">
<div class="column-outlet">
<ul><strong>Tools</strong>
<li class="force-css" data-group="Light">Tool 1</li>
<li class="force-css" data-group="Light">Tool 2</li>
<li class="force-css" data-group="Light">Tool 3</li>
</ul>
<ul><strong>Light</strong>
<li class="force-css" data-group="Light">Light 1</li>
<li class="force-css" data-group="Floor">Light 2</li>
<li class="force-css">Light 3</li>
<li class="force-css">Light 4</li>
</ul>
<ul><strong>Tools</strong>
<li class="force-css">Manual tools</li>
<li class="force-css">Electric tools</li>
</ul>
</div>
<div class="column-outlet">
<ul><strong>Other</strong>
<li class="force-css">Other 1</li>
<li class="force-css">Other 2</li>
<li class="force-css">Other 3</li>
</ul>
<ul><strong>Roof</strong>
<li class="force-css">Roof 1</li>
<li class="force-css">Roof 2</li>
<li class="force-css">Roof 3</li>
<li class="force-css">Roof 4</li>
</ul></div>
</ul>
</li>
<li class="active" id="drop-a-down">Animals
<ul class="drop-a-content">
<div class="column-outlet">
<ul><strong>Blocks</strong>
<li class="force-css">Block 1</li>
<li class="force-css">Block 2</li>
<li class="force-css">Block 3</li>
</ul>
<li class="active" data-group="Category-2">Cats</li>
<li class="active" data-group="Category-3">Dogs</li>
<li class="active" data-group="Category-4">Birds</li>
<li class="active" data-group="Category-5">Elephants</li>
<li class="active" data-group="Category-6">Tigers</li>
<li class="active" data-group="Category-7">Lions</li>
<li class="active" data-group="Category-8">Other</li>
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<li data-group="<?php echo $subCategory->name; ?>"><?php echo $subCategory->name; ?></li>
<?php endforeach; ?>
</ul>
</div>
<div style="text-align:center;margin-top:2%;">
Get your products now!
</div>
<div style="clear:both;"></div>
<div class="inner">
<div class="row" style="margin-top:-5%;">
<?php if($this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories)): ?>
<div class="col-md-12 col-xs-12">
<div class="centered-pills" style="width:98%;margin:0 auto;">
<ul class="nav nav-pills">
<li class="filterTitle">Filter:</li>
<li class="active" data-group="All">Alle</li>
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<li data-group="<?php echo $subCategory->name; ?>"><?php echo $subCategory->name; ?></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php else: ?>
<div class="col-md-12 col-xs-12">
<p class="text-center" style="display:none;">Promotions in: <span class="divider"></span><strong><?php echo $this->category->name; ?></strong> <span class="divider"></span>Show all products</p>
</div>
<?php endif; ?>
<?php if(isset($this->leading) && count($this->leading)): ?>
<ul id="grid">
<?php foreach($this->leading as $key=>$item): ?>
<?php $this->item=$item; echo $this->loadTemplate('item'); ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<div style="text-align:center;margin-top:2%;font-style:italic;font-size:75%;">
All products are property of us.
</div>
</div>
<?php if($this->params->get('catDescription')): ?>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="disclaimer">
<?php echo $this->category->description; ?>
</div>
</div>
</div>
<?php endif; ?>
</div>
Jquery
/* initialize shuffle plugin */
var $grid = jQuery('#grid');
$grid.shuffle({
group: 'all',
itemSelector: '.portfolio-item', // the selector for the items in the grid
speed: 500 // Transition/animation speed (milliseconds)
});
/* reshuffle when user clicks a filter item */
jQuery('.nav-pills li').click(function (e) {
e.preventDefault();
// set active class
jQuery('.nav-pills li').removeClass('active');
jQuery(this).addClass('active');
// get group name from clicked item
var groupName = jQuery(this).attr('data-group');
// reshuffle grid
$grid.shuffle('shuffle', groupName );
});
});
Please help me custome wp_nav_menu with walker , thanks
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">PROJECT<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-5">
<div class="col-sm-4">Introduction</div>
<div class="col-sm-4">Floor Plans A Type</div>
<div class="col-sm-4">Floor Plans B Type</div>
<div class="col-sm-4">Floor Plans C Type</div>
<div class="col-sm-4">Floor Plans D Type</div>
<div class="col-sm-4">Floor Plans E Type</div>
</div>
</div>
</li>
</ul>
</li>
how can i add some container tag after ul tag like <li class="grid-demo">
<div class="row">
<div class="col-sm-5">
<li>LOCATION</li>
<li>FEATURES</li>
<li class="dropdown yamm-fw">PAYMENT<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-5">
<div class="col-sm-4">Playment T&C</div>
<div class="col-sm-4">Financial Services</div>
</div>
</div>
</li>
</ul>
</li>
<div class="spanLogo">aaa</div>
and how can i add one <div class="spanLogo">aaa</div> here
continue
<li class="dropdown yamm-fw">PUBLICITY<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-5">
<div class="col-sm-4">News & Events</div>
<div class="col-sm-4">Testimonial</div>
</div>
</div>
</li>
</ul>
</li>
and here > > and how can i add one a tag with image like code above , thanks
<li>CONTACT</li>
<a class="navbar-brand" href="#"><img src="images/logo_paujar_top.jpg"/></a>
</ul>
I would like suggest you should used wp_get_nav_menu_items() function. In this function you can get separately all your menu title and url, So easily you manage your html.
Here is demonstration
<?php $menu_item = wp_get_nav_menu_items($menuId);
foreach($menu_item as $menu):?>
<a class="menu-iterm" href="<?php echo $menu->url;?>">
<?php echo $menu->title;?>
</a>
<?php endforeach;?>
For more information you get here http://codex.wordpress.org/Function_Reference/wp_get_nav_menu_items
Say I have the following div:
<div id="nav">
<ul>
<li class="navButton">Home</li>
<li class="navButton"><a href="http://www.freewebsitetemplates.com">Guitar
Bodies</a></li>
<li class="navButton"><a href="http://www.freewebsitetemplates.com">Guitar
Pickguards</a></li>
<li class="navButton">Contact Us</li>
</ul>
</div>
I would want this to be repeated a certain number of times so the resulting html would look like:
<div id="nav">
<ul>
<li class="navButton">Home</li>
<li class="navButton"><a href="http://www.freewebsitetemplates.com">Guitar
Bodies</a></li>
<li class="navButton"><a href="http://www.freewebsitetemplates.com">Guitar
Pickguards</a></li>
<li class="navButton">Contact Us</li>
</ul>
</div> <div id="nav">
<ul>
<li class="navButton">Home</li>
<li class="navButton"><a href="http://www.freewebsitetemplates.com">Guitar
Bodies</a></li>
<li class="navButton"><a href="http://www.freewebsitetemplates.com">Guitar
Pickguards</a></li>
<li class="navButton">Contact Us</li>
</ul>
</div> <div id="nav">
<ul>
<li class="navButton">Home</li>
<li class="navButton"><a href="http://www.freewebsitetemplates.com">Guitar
Bodies</a></li>
<li class="navButton"><a href="http://www.freewebsitetemplates.com">Guitar
Pickguards</a></li>
<li class="navButton">Contact Us</li>
</ul>
</div>
If the number was 3. What php command is used to do this sort of thing? (I know I use a for loop, but I mean the code in between)
Essentially what I will eventually have is something like this:
for each product
div product
text from product file
close div product
Thanks
Just use the foreach or while like this:
foreach($array as $value){
?>
<div>
whatever <?php other php here ?>
</div>
<?php
}
<div class='nav'>
<ul>
<?php foreach ($products as $product): ?>
<li class='navbutton'><?php echo $product->text; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
if you have multiple different divs, make a foreach loop for that too, if you want same div to repeat 3 times, wrap it around a for loop
<?
for ($results as $value) {
echo '<div id="nav">';
echo ' <ul>';
echo ' <li class="navButton">Home</li>';
echo ' <li class="navButton">'.$value['name1'].'</li>';
echo ' <li class="navButton">'.$value['name2'].'</li>';
echo ' <li class="navButton">Contact Us</li>';
echo ' </ul>';
echo ' </div>';
}
?>
Hey so I have a problem, one I cant figure out. I cant seem to make it so only one sub menu to show up. Ex: When on About.php it has a constant submenu based on the code below. So when I click on Info for another submenu to pop up I want it to close the constant submenu and open the new. Not just write me another submenu below it. I do not care really what form it is in, javascript or php. Just would like it simple for me to do, and if you need my js file: JS FILE
CODE:
<div id="div_2" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>
</ul>
</div>
</div>
<div id="div_3" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</div>';
if ($sub == 'gallery')
echo '<div id="div_1" style="display:none"></div>
<div id="div_2">
<div id="sub-menu">
<ul class="menu">
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>
</ul>
</div>
</div>
<div id="div_3" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</div>';
if ($sub == 'about')
echo '
<div id="div_1"></div>
<div id="div_2" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>
</ul>
</div>
</div>
<div id="div_3">
<div id="sub-menu">
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</div>';
?>
<?php
if ($bar == 'about')
echo '
<li>ABOUT</li>
<li>CONTACT</li>';
if ($bar == 'gallery')
echo '
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>';
?>
You're repeating id="sub-menu" in your HTML.
ID is supposed to be unique to ONE element.
CLASS can be repeated/reused on multiple elements.
Looking at your JS file...you're attempting to engage at least 2 or 3 elements simultaneously by using getElementById(elemId) - I've not tried running your code, but I'm betting it throws an error.
In your HTML - set a unique ID to one of your sub menus (id="sub_menu_1"). Then use that same ID in your JS getElementById('sub_menu_1'), and see if your situation improves.
you have to change this line like this
<a id="a_title_3" onclick="SetCurrent(3);return false;"><span>INFO</span></a>
there are two "a_title_2" id named objects.
<a id="a_title_2" onclick="SetCurrent(2);return false;" href="#" class=""><span>GALLERY</span></a>
<a id="a_title_2" onclick="SetCurrent(3);return false;" class="current"><span>INFO</span></a>
it will work fine when you change it to '3'.