assigning "active" class to navigation--wordpress - css

I need to assign an "active" class to my main-level navigation rendered by wordpress.
Here's my HTML:
<li>Home</li>
<?php wp_list_pages('title_li=&exclude=21'); ?>

See WP Codex for adding classes/ids to your wp template:
<li<?php
if (is_home()) {
echo " class=\"active\"";
}
?>>Home</li>

WordPress automatically adds relevant classes to list items that are made using the wp_list_pages() function. For example, it will add a class of current_page_item to the page which you are currently viewing - allowing you to style this particular list item differently.
This only works for pages and afaik does NOT work for posts. However, there is a slightly hack-ish way around it. If you have a list of posts from your loop, each post will have a class with post-## -- where ## is the ID of the post (as long as you use the get_post_class() function, or similar)
You can also get the ID of the current post being displayed by:
Outside of the list of posts you are outputting, preferably in your header.php, have:
$this_posts_id = $post->ID;
Then inside of the loop of the list of posts you are making:
if($this_posts_id == $post->ID;){echo "current";}
or something similar!
Hope that helps

Related

Additional content in Wordpress - possible use of Custom Taxonomies

I'm fairly new to the Custom Taxonomies in Wordpress, but I wanted to see if I can use this feature to achieve a list of items that link of to pages within my site.
Here is the final HTML I am looking to output:
<ul>
<li>Custom Taxonomy 1</li>
<li>Custom Taxonomy 2</li>
<li>Custom Taxonomy 3</li>
<li>Custom Taxonomy 4</li>
</ul>
As you can see above I have various taxonomy items (i.e. 1 & 4) both linking to the same URL.
So I am looking to see if it is possible to:
Setup Custom Taxonomies with two data inputs (name & custom URL) that I could reference in my theme
Alternatively, I would just create another HTML section where I could define the content (& links) in each post. (Almost as if it was a secondary 'content' area).
I would prefer not to use a plugin if possible, as I am attempting to maintain autonomy of the background code. Is this possible?
EDIT:
Sorry if this wasn't clear. I'm not 100% if Custom Taxonomies is the correct way to go.
Basically, I have a list of 'features' that I want to tag on each of my 'portfolio' posts. I want to display these features in a simple (linked) unordered list.
The important thing however is I don't want the list to be linked to a category/archive (like normal tags work). I want to be able to define the URL to an existing 'service' page for each feature, so the user can read more.
Therefore I need to be able to define both the name of the feature and the url of the page the link should point to.
As the list of 'features' & the pages they point to will always remain the same, I thought Custom Taxonomies may be the solution.
You can make a template for each taxonomy term , in your case for each feature.
So ie if you have a term with the name 'premium' you can make a taxonomy-features-premium.php template file and place whatever you want.
So on your page where the portfolio post is being display you can show all the features with their permalinks and if you have make the template files for every term when you click on a term will show the template file for the term that you selected.
or inside the template files you can just redirect them to the page you want.
Update :
In your single-portfolio.php (the template file responsible for showing the portfolio custom post) you can put somewhere in your code (depending your needs and the style of your page) :
echo '<ul>';
echo get_the_term_list( $post->ID, 'features', '<li>', ',</li><li>', '</li>' );
echo '</ul>';
Doc : http://codex.wordpress.org/Function_Reference/get_the_term_list or you can use : http://codex.wordpress.org/Function_Reference/get_the_terms if you want to take more control of your terms.
This would return something like :
<ul>
<li>Premium Feature</li>
<li>Basic Feature</li>
</ul>
So now you have all the terms belonging to the specific post. So if you create a taxonomy-features-premium.php template file, when the user clicks the Premium Feature link wordpress will show whatever is in that template. Notice that if you don't have a taxonomy-features-premium.php template wordpress will search for a taxonomy-features.php (that template is usufull if you want all your terms to be shown the same way). More about template hierarchy here : http://codex.wordpress.org/Template_Hierarchy#Custom_Taxonomies_display
Now inside the template or you can copy paste the code that you have in your page + add some modifications corresponding to the term or you can just redirect to the page you want : wp_redirect(get_permalink( $your_page_id )); exit;

Wordpress Nav menu: doesn't show on custom post type category pages

I'm working on a WordPress site with 2 custom post types. For some reason that I cannot figure out, my nav menus are not displaying on my category.php pages. The header.php file is being called and rendered just fine, and the Nav menu works on all other pages. So, I believe the problem is not to do with the WP Nav menu, but with the query.
I had the same issue with my footer Nav menu. I found others who solved this problem by resetting the query to NULL just before footer.php is called. This works, though it seems like a poor solution.
Of course, I cannot do this before header.php is called because I need to use the query in order to fetch and render all the content on the page. I'm really stuck here. Has anyone else had this problem?
--- UPDATE ---
This is working, and is based on the same principle mentioned above: reset the query, get the nav menu.
// store the query in a variable
$query_store = $wp_query;
// reset the query
$wp_query = NULL;
$wp_query = new WP_Query(array('post_type' => 'projects'));
// get the header
get_header();
// retrieve the query from storage, use it
$wp_query = $query_store;
I am also sorting by custom meta_values. I am able to pass the active category to the new query using this method:
// get the current category, pass it to the new query arguments below
if (is_category('category-one')) { $category_name = 'category-one'; }
if (is_category('category-two')) { $category_name = 'category-two'; }
However, this presents another issue: the class list (set in header.php) no longer contains the category class (which affects my CSS).
My original question still remains: is there a cleaner way to do this?
You have to reset all the postdata array and query array, for that you can use below links.
[1] http://codex.wordpress.org/Function_Reference/wp_reset_postdata
[2] http://codex.wordpress.org/Function_Reference/wp_reset_query
thanks.
have you tried adding the 2 functions below at the end of every wp loop you have in the page?
wp_reset_postdata();
wp_reset_query();

How to apply an extra class to a taxonomy ul?

In Drupal, I render a list of taxonomy-items in the node template, using
print render($content['field_my_taxonomy']);
It displays a list like:
<ul class="links">
<li class="taxonomy-term-reference-0">
<a property="rdfs:label skos:prefLabel" typeof="skos:Concept" href="somewhere">
Tomaten
</a>
</li>
(...)
So far, so good. Now, I'd like to apply some of my own classes to both the li-tags and to the ul-tag.
I've managed to add a class to each li-tag via theme_preprocess_node:
$vars['content']['field_my_taxonomy'][$i]['#options']['attributes']['class'] = "my-li-class";
(where $i contains the index of the li-item).
However, I cannot find a similar procedure to add a class to the UL
I have found soultions involving creating template-files for specific fields, or involving overriding the theme function for taxonomy items alltogether. I don't like these solutions, because the involve adding quite a bit of "bloat" to my theme. I'd like to just add a new item to an array and let Drupal take care of the rendering. Surely, it must be possible to add ['attributes']['class']='my-ul-class to an array somewhere?
You could override the theme_item_list($variables) theme function or implement a hook_preprocess_HOOK function which would be hook_preprocess_item_list($variables) I think. The first would do your alterations in the theme itself, the second would do the alterations before going to the normal theme function.
links:
http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_item_list/7
http://api.drupal.org/api/drupal/modules!system!theme.api.php/function/hook_preprocess_HOOK/7

How can I create a link to a specific page in wordpress?

It seems like a simple task, but I'm having difficult time finding any information on this. Basically I have an "Events" page created in wordpress to which I want to create a link on my main page. I do not want it to be static like (https://mysite.com/events). Is there a way to do it dynamically?
You want to use the get_permalink() function to write the link - http://codex.wordpress.org/Function_Reference/get_permalink
This function accepts an argument which is the post or page ID (and defaults to the ID of the current page), so if your Events page is ID #11, it would look like to following to also have the link text match the page title (should it change to "Events!" in the future, for example):
<?php $events_page = get_post(11); ?>
<?php echo $events_page->post_title; ?>

Wordpress show sub menu items on index page

I am using wordpress and on the page "sidebar.php" I have the following code:
<?php wp_list_pages('post_type=wiki&depth=1'); ?>
It works great but what I need to do it that what I click on a Menu item on the sidebar I need the sub items to display on the main page.
UPDATE:
What I basically need to do is to have the first level items on the left (As it currently is), and when those links are clicked then the sub items of those items will be listed on the index.php (main page).
I am using the wp-wiki plugin to display the pages as wiki pages but the actual but the list is the same, just showing as a different type:
post_type=wiki
Can anyone help please?
Thanks
<?php
wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->ID.'&depth=0');
?>
There's several ways you can accomplish this. WordPress actually has an example of exactly what you're looking to do in the Codex. (link - the last example in that section, right above the "List subpages even if on a subpage" heading)
There's several ways to do this though - that's just one example. But that code above, you just pop into your sidebar.php file. You can also create a widget out of it. And as someone else mentioned, you can use the new menu system for WordPress (but you can indeed, make it dynamic.) But the above example in the Codex is the simplest method.
Actually, an easier method would be just to list all subpages and use CSS to hide and show the child items based on what page you're on. The classes are already set up for you. Just view your source code and you can see it. So you'd do something like:
`li ul.children {display:none; }
li.current_page ul.children { display:block; }`
and variations thereof.
What about using the new menu function in wp 3?
That way you could include your type with any sub page you want (won't be dynamic though) and then add your favorite javascript or good css to show those sub-pages.

Resources