formatting help with wp_list_pages() - php

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

Why does the css get corrupted when I get the data dynamically in an html?

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.

How to use sub(sub)Categories in Joomla! K2

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 );
});
});

How to add a another li container after ul container wp_nav_menu wordpress and other html tag?

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

Generating divs in php?

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>';
}
?>

Make a Sub menu to show up

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'.

Categories