Adding Custom Menu Locations in WordPress Themes

Basic Setup

Step 1: First, we need to register your new menus. In this example, we’ll create the menus Header Navigation and Expanded Footer. Add this PHP code to your functions.php, or link to it in a separate file:
[code]
// Add Your Menu Locations
function register_my_menus() {
register_nav_menus(
array(
‘header_navigation’ => __( ‘Header Navigation’ ),
‘expanded_footer’ => __( ‘Expanded Footer’ )
)
);
}
add_action( ‘init’, ‘register_my_menus’ );
[/code]

Step 2: Let your users know that your menu location exists by adding a message to the front end when no menu is yet assigned. Insert this code directly below the previous:
[code]
function default_header_nav() { // HTML markup for a default message in menu location
echo “


}

function default_expanded_footer() {
echo “


}
[/code]
Step 3: Insert this code into your templates wherever you want your Header Navigation menu to appear:
[code]
<?php
wp_nav_menu(array(
‘theme_location’ => ‘header_navigation’, // menu slug from step 1
‘container’ => false, // ‘div’ container will not be added
‘menu_class’ => ‘nav’, //

Display Posts from Current Month & Year in a WordPress Template

Hi Y’all,
I was presented with this challenge while putting together a magazine-type site, where the home page was to display articles from the current issue–meaning the current month and year. Checking the forums, I found some solutions, and although the topics have been closed, I have found that they are incomplete. Some call the current month, i.e. “March”, but don’t not discern the current year, showing posts from March 2013, March 2012, etc. And some simply don’t work at all, sorry to say.

Here’s what I came up with, and have proven to work…
[code]
<?php
$current_year = date(‘Y’, current_time(‘timestamp’));
$current_month = date(‘m’, current_time(‘timestamp’));
query_posts(“year=$current_year&monthnum=$current_month”);
if(have_posts()) : while(have_posts()) : the_post();
?>
// YOUR POST MARKUP
<?php endwhile; endif; wp_reset_query(); ?>
[/code]
Of course, there is room to pass way more arguments within query_posts(), but that’s the easy part.

How to add Bootstrap Breadcrumbs to your WordPress Theme

Another 5 minute integration…
First of all, I’m assuming you already have Bootstrap css/js linked up to your theme correctly.
Secondly, 99.9% percent of this function was created by Dimox in his post WordPress Breadcrumbs Without a Plugin. So go ahead & get your source material from him.
Lastly, All I did was swap the Bootstrap markup into his php file. Click here for the Bootstrap markup, which looks like this:
[code]

[/code]
Compare the html portions of Dimox’s php file with my modifications below:
[code]
<?php

function dimox_breadcrumbs() {

$showOnHome = 0; // 1 – show breadcrumbs on the homepage, 0 – don’t show
$delimiter = ‘<span class=”divider”>/</span>’; // delimiter between crumbs
$home = ‘Home’; // text for the ‘Home’ link
$showCurrent = 1; // 1 – show current post/page title in breadcrumbs, 0 – don’t show
$before = ‘<li class=”active”><span class=”current”>’; // tag before the current crumb
$after = ‘</span></li>’; // tag after the current crumb

global $post;
$homeLink = get_bloginfo(‘url’);

if (is_home() || is_front_page()) {

if ($showOnHome == 1) echo ‘<ul class=”breadcrumb”><li><a href=”‘ . $homeLink . ‘”>’ . $home . ‘</a></li></ul>’;

} else {

echo ‘<ul class=”breadcrumb”><li><a href=”‘ . $homeLink . ‘”>’ . $home . ‘</a> ‘ . $delimiter . ‘</li> ‘;

if ( is_category() ) {
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) echo get_category_parents($thisCat->parent, TRUE, ‘ ‘ . $delimiter . ‘ ‘);
echo $before . ” . single_cat_title(”, false) . ” . $after;

} elseif ( is_search() ) {
echo $before . ‘Search results for “‘ . get_search_query() . ‘”‘ . $after;

} elseif ( is_day() ) {
echo ‘<li><a href=”‘ . get_year_link(get_the_time(‘Y’)) . ‘”>’ . get_the_time(‘Y’) . ‘</a> ‘ . $delimiter . ‘</li> ‘;
echo ‘<li><a href=”‘ . get_month_link(get_the_time(‘Y’),get_the_time(‘m’)) . ‘”>’ . get_the_time(‘F’) . ‘</a> ‘ . $delimiter . ‘</li> ‘;
echo $before . get_the_time(‘d’) . $after;

} elseif ( is_month() ) {
echo ‘<li><a href=”‘ . get_year_link(get_the_time(‘Y’)) . ‘”>’ . get_the_time(‘Y’) . ‘</a> ‘ . $delimiter . ‘</li> ‘;
echo $before . get_the_time(‘F’) . $after;

} elseif ( is_year() ) {
echo $before . get_the_time(‘Y’) . $after;

} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != ‘post’ ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo ‘<li><a href=”‘ . $homeLink . ‘/’ . $slug[‘slug’] . ‘/”>’ . $post_type->labels->singular_name . ‘</a>’;
if ($showCurrent == 1) echo ‘ ‘ . $delimiter . ‘</li> ‘ . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘</li> ‘);
if ($showCurrent == 0) $cats = preg_replace(“#^(.+)\s$delimiter\s$#”, “$1″, $cats);
echo $cats;
if ($showCurrent == 1) echo $before . get_the_title() . $after;
}

} elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;

} elseif ( is_attachment() ) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘</li> ‘);
echo ‘<li><a href=”‘ . get_permalink($parent) . ‘”>’ . $parent->post_title . ‘</a>’;
if ($showCurrent == 1) echo ‘ ‘ . $delimiter . ‘</li> ‘ . $before . get_the_title() . $after;

} elseif ( is_page() && !$post->post_parent ) {
if ($showCurrent == 1) echo $before . get_the_title() . $after;

} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = ‘<li><a href=”‘ . get_permalink($page->ID) . ‘”>’ . get_the_title($page->ID) . ‘</a>’;
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)-1) echo ‘ ‘ . $delimiter . ‘</li> ‘;
}
if ($showCurrent == 1) echo ‘ ‘ . $delimiter . ‘</li> ‘ . $before . get_the_title() . $after;

} elseif ( is_tag() ) {
echo $before . ‘Posts tagged “‘ . single_tag_title(”, false) . ‘”‘ . $after;

} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . ‘Articles posted by ‘ . $userdata->display_name . $after;

} elseif ( is_404() ) {
echo $before . ‘Error 404’ . $after;
}

if ( get_query_var(‘paged’) ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘ (‘;
echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’);
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘)’;
}

echo ‘</ul>’;

}
} // end dimox_breadcrumbs()

?>
[/code]
Blindly copying & pasting this in place of his should work hassle-free, but where’s the opportunity to learn?!?!

Add Twitter Bootstrap Pagination to your WordPress Theme

Hi. I’ve been focusing a lot of my efforts on integrating Twitter’s Bootstrap with WordPress themes. Here is one of the easiest integrations so far! Thanks a heaping ton to this article: How to Build a WordPress Post Pagination Without a Plugin. The base code is super light weight, and it works on index.php, category.php, & archive.php right out of the box.
I’ll assume you’ve already got Twitter Bootstrap CSS & Javascript installed for WordPress in your own special way. So, next…
1). Visit the above link and cut & paste the code into your functions.php
Or, better yet, link to a separate file to keep things clean. The articles instructions are straight forward. I’ve also Found & Replaced “kriesi” with “bootstrap” (1 change).
2). Hack in the Bootstrap markup.
Bootstrap Pagination is explained here. The markup looks something like this:
[code]

[/code]

So we just have to crawl through our PHP code to discover how to recreate this structure.
We need to add the <ul> tag immediately after the <div class=”pagination”> (and the closing tag immediately before). And we need to surround all the pagination elements, i.e. <a> and <span>, with <li>...</li>. Lastly, add the class active to the <li> surrounding <span class="current">.
*The disabled class is not necessary because the base code already makes those elements invisible.

Here is my finished product…

[code]
<?php

function bootstrap_pagination($pages = ”, $range = 2)
{
$showitems = ($range * 2)+1;

global $paged;
if(empty($paged)) $paged = 1;

if($pages == ”)
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}

if(1 != $pages)
{
echo “<div class=’pagination pagination-centered’><ul>”;
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo “<li><a href='”.get_pagenum_link(1).”‘>&laquo;</a></li>”;
if($paged > 1 && $showitems < $pages) echo “<li><a href='”.get_pagenum_link($paged – 1).”‘>&lsaquo;</a></li>”;

for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? “<li class=’active’><span class=’current’>”.$i.”</span></li>”:”<li><a href='”.get_pagenum_link($i).”‘ class=’inactive’ >”.$i.”</a></li>”;
}
}

if ($paged < $pages && $showitems < $pages) echo “<li><a href='”.get_pagenum_link($paged + 1).”‘>&rsaquo;</a></li>”;
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo “<li><a href='”.get_pagenum_link($pages).”‘>&raquo;</a></li>”;
echo “</ul></div>\n”;
}
}

?>
[/code]

Bonus Footage

You may have noticed on the linked instructions that there is a very simple template tag to implement your new feature — <?php bootstrap_pagination();?>. I like to use this tag at the bottom of my list of posts. So here’s a slight modification that I insert at the top of my list of posts which is only displayed on ‘paged’ pages.
[code]<?php $paged = $wp_query->get( ‘paged’ );
if ( ! $paged || $paged < 2 ) { /* do nothing */ }
else { bootstrap_pagination(); }
?>[/code]

How to make Bootstrap Carousel display WordPress Dynamic Content

When code from Twitter’s Bootstrap is not working, one of the main culprits is in linking the files up correctly. It seems to be especially common when adding Bootstrap javascript plugins to a WordPress theme. The Bootstrap files and your jquery library must be called in the proper sequence, along with loads of other scripts being called by other plugins you may be running. I’ve found the popular “WordPress Twitter Bootstrap CSS” plugin to be the best option so far, as it is quite painless and transparent. So Let’s begin.

1) Install ‘WordPress Twitter Bootstrap CSS’ Plugin

Of course you can do it manually, but this method takes 5 seconds, and you can be sure it loads the stylesheets and scripts in their proper places. Btw, it’s best to keep the default option of loading scripts in the footer. If you haven’t already, be sure to add the template tag <?php wp_footer();?> just before the </body> tag in the footer of your theme. The Bootstrap plugin will use this to load it’s necessary javascript.

2) Include the latest jquery library

I’ve added mine just above the wp_footer tag, like so…

[code]






[/code]

Now you can see that the jquery library is called first, and then the bootstrap stuff, as it should be.

3) Grab the Bootstrap Carousel source code

The demo lives here. And here is their source code…

[code]


[/code]

4) Verify your work so far

Before we start modifying this code, we’ll want to verify that the jquery library, the Bootstrap plugin files, and wordpress are all playing together nicely. Cut & Paste the above code into your own PHP template file, and do what you gotta do to view your carousel in a browser. I’ve saved mine as sidebar-carousel.php in my theme directory, so I can call it with <?php get_sidebar(‘carousel’);?> from inside my index.php template.
Just to save some time, I admit I already changed one thing in this code from the original- I added a height dimension to the images. Obviously the specific JPGs won’t show up, but the added height should allow you to see that the carousel is scrolling when right/left buttons are clicked.
Hint: If clicking a right/left button does nothing but add “#myCarousel” to your url, jquery is not linked up properly.

5) Prepare your Content

We’re keeping it as simple as posible here by creating a category named Home Slider and publishing 3 sample posts under that category. If you’ve already got plenty of content to play with, you can skip this step and insert your category of choice as category_name in the next step… you’ll see.

6) Add your first loop using WP_Query

Now that you’ve seen it work out of the box, it’s time to add the tricky part.
You’ll notice the source code provided 3 carousel items, i.e. <div class=”item”>. Our purposes only require 2: the 1st item with the added class “active”; and the 2nd item, which will self-replicate in the query loop we’re about to create. But first we’ll focus on the active carousel item.
We need to surround the <div class=”item active”> with its own WP_Query loop. So just above it, we ask for the latest post from the category Home Slider. Then we end that loop after the active item div with endwhile and the very important wp_reset_postdata fucntion.

[code]