Is it possible to have Wordpress generate this type of unordered list?
<ul id="nav1">
<li>item1</li>
<li>item2
<ul id="nav2">
<li>subitem1</li>
</ul></li>
<li>item3</li>
</ul>
Obviously I can do the following:
<ul id="nav1">
<?php wp_list_pages(); ?>
</ul>
But my question is, how do I make it so that I can have a secondary ul under a page (or list item such as 'item2' above)?
Basically, I'm looking for a way for Wordpress to dynamically generate the following:
<li>item2
<ul>
<li>subitem1</li>
</ul></li>
And I can use JQuery if necessary to give the secondary (sub menu) unordered list an id of #nav2...
Anyway, is this possible?
Thanks and I appreciate all of your help!
Amit
Nevermind guys.
I just tried it with the wp_list_page(); function and it works. It does exactly as I wanted it to with exception to one thing...
It put's an extra <ul> in there so the list looks something like this:
<ul id="nav1">
Pages
<ul>
<li>item1
<ul class="children">
<li>sub-item1</li>
</ul></li>
</ul>
</ul>
Anyone know how to get rid of the <ul> following the Pages title, as well as NOT show the word Pages?
Thanks, Amit
Okay, I solved the added ul program.
This is what I have as the result:
<ul id="nav1"><?php
$pageargs = array(
'link_after' => ' /',
'title_li' => __('')
);
wp_list_pages($pageargs); ?></ul>
Hope someone benefits from it :)
Amit
Related
I list my categories with wp_list_categories().
When there are subcategories, the result/html gives by default :
<ul>
<li>category parent</li>
<ul class="children">
<li>category children</li>
</ul>
</ul>
I would like to remove the ul list for the catégories children, to have a simple list of categories:
<ul>
<li>category parent</li>
<li>category children</li>
</ul>
Do you know how can it be done?
The easiest way is using jQuery
var innerUl = $(".children").html();
$(".children").remove();
$("ul").append(innerUl);
Or you can use .unwrap(), it would be a better solution.
I'm working with the Twig template engine and want to include a sub-template linke the following example:
<header>
<div id="menu">
{% include 'menu.twig' %}
</div>
</header>
The included file contains the following code:
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
Now Twig generates the followig HTML code:
<header>
<div id="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</header>
As you can see the indentation level is only correct for the first line of the included file which leads to the code above which is quite untidy and bad to maintain.
How is it possible to get a correct output from Twig with correct indentation like this?
<header>
<div id="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</header>
I don't think there is a way to maintain indentation when including templates. The only solution I can imagine would be to pass the indentation level in a variable and use a loop in the included template to prefix that amount of whitespaces in each line. Obviously this "solution" would be crazy and a nightmare to maintain.
Regarding this comment: "[...] which leads to the code above which is quite untidy and bad to maintain." I'd like to say the following:
It doesn't matter if the HTML is "untidy". Browsers won't complain and users won't see it.
It's true that it's bad to maintain. Luckily, you maintain the beautifully aligned Twig template, not the generated HTML code.
All the above would be different if the Twig template was generating a format where "perfect alignment" is mandatory. But in the case of HTML, please don't waste your time aligning the tags.
If you just want to maintain the exact indentation of the included sub-template, you can do this:
<header>
<div id="menu">
{% include 'menu.twig' %}
</div>
</header>
i.e. put all the "include" directives at the beginning of the line. The result will be:
<header>
<div id="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</header>
But somehow I feel this is not good enough.
Another solution is to add the indentation in the sublayout, i.e.
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
but of course it only works if the sublayout is always included at a certain level of indentation.
I suggest you take a completely different route and format the response after it is generated, e.g. with a listener on the kernel.response event.
You can add a Twig filter like this after creating your twig environment in php:
$filter = new Twig_Filter('ident', function ($string, $number) {
$spaces = str_repeat(' ', $number);
return rtrim(preg_replace('#^(.+)$#m', sprintf('%1$s$1', $spaces), $string));
}, array('is_safe' => array('all')));
$Your_Twig_Environment->addFilter($filter);
after this you can use it like this :
{{ include('menu.twig')|ident(4) }}
(be careful use include function syntax with {{ }} and not include tag syntax {% %})
I am using ng-repeat to show list items with some text. And I want every single item to be indented 10-20px to the right from the previous one. I don't have much experience with css.
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}">
{{todo.toDoText}}
</li>
Here is a jsFiddle with my code.
Thanks in advance!
you may use ng-style to solve your problem:
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}"
ng-style="{'margin-left': 10*$index+'px'}">
{{todo.toDoText}}
</li>
$index is a varibale that will be set by ng-repeat. You may use this to calculate your style.
Change your template with following::
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}" style="text-indent: {{$index * 10}}px">
{{todo.toDoText}}
</li>
</ul>
</div>
I need to show the category thumb and description of custom taxonomy. lets say I have this:
<ul>
<li>Cars
<ul>
<li>Electric cars</li>
<li>foo cars
<ul>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</li>
</ul>
</li>
</ul>
And what i need is to show the thumb and description of the subcategories electric cars and foo cars, not the post inside them.
Anyone can guide me, where i can looking foor?
Tks
I am developing WP website and stuck in side bar category showing functionality.
Here is my code.
<div class="sidebarcategory">
<h2 class="widgettitle"><?php echo get_cat_name(3); ?></h2>
<ul>
<li>
<?php wp_list_categories('hide_empty=0&orderby=name&child_of=3&feed_image=http://devsites.dyndns.info/novelty/wp-content/themes/pixel/images/icon-car.png'); ?>
</li>
</ul>
</div>
So, this display me Additional "Category" over the top of the list which i don't require. Can anybody help me to remove out in dynamic code. Output looks like
<ul>
<li>
</li><li class="categories">Categories<ul> <li class="cat-item cat-item-4">
add a emty parameter title_li
wp_list_categories('title_li=&hide_empty=0&orderby=name&child_of=3&feed_image=http://devsites.dyndns.info/novelty/wp-content/themes/pixel/images/icon-car.png');