Displaying categories in sidebar using javascript, jquery & php
I recently created a theme and then wanted to add a routine to show my Post categories in a vertical hierarchical menu.
This routine lists the top level category with a count of child posts.
On clicking a category name, the child posts are revealed.
I tried to use a plugin ‘collapse categories’ which should have worked, but the plugin doesn’t work with Bootstrap.css or jquery.1.10+
The routine uses a combination of PHP, Javascript & jQuery.
Work with the routine on the sidebar of the Post of this blog.
The css styles are listed at the bottom of the page
<?php
// set the arguments for the query
$args = array(
‘post_type’ => ‘post’,
‘orderby’ => ‘name’,
‘order’ => ‘ASC’,
‘hide_empty’ => 1,
‘depth’ => 1,
‘posts_per_page’ => -1
);
$categories = get_categories( $args );
// echo each category and create ul (list) for their child posts
echo “<div class=’pcl_category’>”;
foreach ( $categories as $category ) {
echo “<h2 onclick=\”unhide(‘”.$category->slug.”‘);\”>”; //
echo $category->name .” (“.$category->category_count.”)”;
echo “</h2>”;
$args[‘category’] = $category->term_id;
$posts = get_posts($args); ?>
<div class=”post_cat_list”>
<ul id=”<?php echo “pcl_”.$category->slug;?>”>
<?php foreach($posts as $post) { ?>
<li><a href=”<?php the_permalink()?>”><?php the_title(); ?></a></li>
<?php } ?>
</ul>
</div>
<?php }
echo “</div>”;
// reset query after you’re finished with it
wp_reset_query();
?>
// use standard javascript to work with cookies.
// cookies will determine which category list is open
<script>
writeCookie = function(cname, cvalue, days) {
var dt, expires;
dt = new Date();
dt.setTime(dt.getTime()+(days*24*60*60*1000));
expires = “; expires=”+dt.toGMTString();
document.cookie = cname+”=”+cvalue+expires+’; domain=bluelily.com.au’;
}
function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
// use jquery to hide/reveal category lists using jQuery routines
$(function() {
$(‘[id^=”pcl_”]’).hide();
$menuID = readCookie(‘pcl_category’);
$(“#pcl_”+$menuID).show();
});
function unhide($menuID){
$(‘[id^=”pcl_”]’).hide();
$(“#pcl_”+$menuID).delay(50).fadeIn(500);
writeCookie(‘pcl_category’,$menuID,30);
};
</script>
<style>
.pcl_category{text-align: left}
.pcl_category h2{font-size:18px; font-weight: 500; margin-left:20px}
.pcl_category h2:hover{cursor:pointer; text-decoration: underline}
.post_cat_list ul{text-align: left; margin-left:-5px}
.post_cat_list li{line-height: 22px; list-style-type: none}
</style>
Adwords (1)
Branding (13)
- Branding 101
- Why we don’t offer standard prices
- Graphic Design Brisbane
- How much should we spend on corporate rebrand
- How to choose a domain name
- Review of latest free web safe Google fonts
- Logo Design
- Logo Design Brisbane
- Is Company Branding Important to Logo Design?
- Questions to consider before building your website.
- Redesigning logos the right way
- Small business branding or Product branding ?
- Why redesign a website
CMS (3)
CSS (6)
Graphic Design (6)
Javascript (1)
PHP (3)
SEO (5)
tech support (5)
Web Design (10)
- Difference between fluid, reponsive & adaptive design
- Why we don’t offer standard prices
- Example of working print.css file
- Graphic design is more than just logos
- Why pay to maintain my website
- Questions to consider before building your website.
- Sample reset css file for web project
- WordPress – 5 reasons why you should use it
- Why redesign a website
- WordPress – Why not to use it.
Web Development (10)
- How risky are WordPress plugins
- Displaying dates using PHP
- jquery conflicts – how to avoid
- Modify the admin menu bar in WordPress
- Why pay to maintain my website
- Questions to consider before building your website.
- Recent updates to Google search results explained
- Sample reset css file for web project
- Why upgrade WordPress if it’s working
- Use Transient to speed up WordPress
Wordpress (17)
- How risky are WordPress plugins
- Bootstrap & Less – compile online
- How important is https for my website
- Create content that will be read
- Modify the admin menu bar in WordPress
- Why upgrade WordPress if it’s working
- Use Transient to speed up WordPress
- WordPress – 5 reasons why you should use it
- WordPress – adding Google Fonts
- WordPress – CF7 – select fields – CPT
- WordPress – what plugins should developers use
- WordPress – Tinymce extra plugins
- WordPress – Why not to use it.
- WordPress working with ACF Pro
- WordPress – working with cookies – Javascript
- WordPress – working with cookies – PHP
- Displaying categories in sidebar using javascript, jquery & php