macouno.com

Making a category based menu with posts in wordpress 2.9.2

Sunday, May 23rd, 2010

I was not entirely happy with the way wordpress handles menus for this (my own) website. I like the idea of making all the content posts so they’re bound to a date and such. Then I’d like to see them in the menu based on the category they’re in. There are category menus, and even nice folding ones, but I couldn’t find one that displays all the posts per category in a nice way.

So I decided to hack one in myself. It’s a very nasty hack… and I just put a bunch of code in the sidebar.php of my template. But that said… it works and I now have a menu that does what I want.

If you’d like to use this… just remember it’s a great big bad hack and very inefficient!

Here’s the html/php code I added to my template’s sidebar.php:

// Get the id of the current post so we can give it a "current" class later.
$postid = $post->ID;
 
// Arguments for getting all the categories
$args = array(
'show_option_all'    => '',
'orderby'            => 'name',
'order'              => 'ASC',
'show_last_update'   => 0,
'style'              => 'list',
'show_count'         => 0,
'hide_empty'         => 1,
'use_desc_for_title' => 0,
'child_of'           => 0,
'feed'               => '',
'feed_type'          => '',
'feed_image'         => '',
'exclude'            => '',
'exclude_tree'       => '',
'include'            => '',
'hierarchical'       => true,
'title_li'           => '',
'number'             => NULL,
'echo'               => 0,
'depth'              => 0,
'current_category'   => 1,
'pad_counts'         => 0,
'taxonomy'           => 'category' );
 
// Get all categories (in a silly html menu)
$catmenu = wp_list_categories( $args );
 
// Split the menu to get all categories sepparately
$cats = split('
<li class="cat-item cat-item-', $catmenu);
 
$catmenu = '';
 
// Loop through the categories.
foreach($cats as $key => $cat){
 
        $current = '';
 
        // Get the code and html sepparately
        list($id, $code) = split('"><a', $cat);
 
        // Make sure they're there.
        if($id && $code){
 
                // If this is the current category, then remove that text and remember for later
                if(strpos($id, ' current-cat') !== False){
                        $current = ' current-cat';
                        $id = str_replace(' current-cat', '', $id);
                }
 
                // In case we got an id... and this category doesn't have sub categories.
                if(is_numeric($id) && strpos($code, "
<ul class='children'>") === False){
 
                        // Arguments for getting the categorie's posts
                        $args = array(
                                'post_type' => 'post',
                                'post_status' => 'published',
                                'numberposts' => -1,
                                'category' => $id
                                ); 
 
                        // Get the posts
                         $myposts = get_posts($args);
 
                         // If we got any posts returned
                         if(count($myposts)){
 
                                // Start a nice html post list
                                $postlist = "\n".'
<ul class="posts">';
 
                                // Check east post to see if it's current and add to the html
                                 foreach($myposts as $post) {
                                        $current_post = '';
                                        if($postid == $post->ID){
                                                $current_post = ' class="current-post"';
                                                $current = ' current-cat';
                                        }
                                        $postlist .= "\n".'
<li'.$current_post.'><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>
 
';
                                 }
 
                                 $postlist .= "\n".'</ul>
 
';
 
                                // Add the post list to the code of the current category
                                $code = str_replace('</a>', '</a>'.$postlist, $code);
 
                        }
 
                }
 
                // Put everything that was split before back together
                $cat = '
<li class="cat-item cat-item-'.$id.$current.'"><a'.$code;
 
        }
 
        // Add back into the complete category menu
        $catmenu .= $cat;
}
 
// Print out the category menu
echo '
<li id="menu">
<ul>'.$catmenu.'</ul>
</li>
 
';

Display clean php code for copying

// Get the id of the current post so we can give it a "current" class later.
$postid = $post->ID;

// Arguments for getting all the categories
$args = array(
'show_option_all'    => '',
'orderby'            => 'name',
'order'              => 'ASC',
'show_last_update'   => 0,
'style'              => 'list',
'show_count'         => 0,
'hide_empty'         => 1,
'use_desc_for_title' => 0,
'child_of'           => 0,
'feed'               => '',
'feed_type'          => '',
'feed_image'         => '',
'exclude'            => '',
'exclude_tree'       => '',
'include'            => '',
'hierarchical'       => true,
'title_li'           => '',
'number'             => NULL,
'echo'               => 0,
'depth'              => 0,
'current_category'   => 1,
'pad_counts'         => 0,
'taxonomy'           => 'category' );

// Get all categories (in a silly html menu)
$catmenu = wp_list_categories( $args );

// Split the menu to get all categories sepparately
$cats = split('
<li class="cat-item cat-item-', $catmenu);

$catmenu = '';

// Loop through the categories.
foreach($cats as $key => $cat){

$current = '';

// Get the code and html sepparately
	list($id, $code) = split('"><a', $cat);

// Make sure they're there.
	if($id && $code){

// If this is the current category, then remove that text and remember for later
		if(strpos($id, ' current-cat') !== False){
			$current = ' current-cat';
			$id = str_replace(' current-cat', '', $id);
		}

// In case we got an id... and this category doesn't have sub categories.
		if(is_numeric($id) && strpos($code, "
<ul class='children'>") === False){

// Arguments for getting the categorie's posts
			$args = array(
				'post_type' => 'post',
				'post_status' => 'published',
				'numberposts' => -1,
				'category' => $id
				);

// Get the posts
			 $myposts = get_posts($args);

// If we got any posts returned
			 if(count($myposts)){

// Start a nice html post list
				$postlist = "\n".'
<ul class="posts">';

// Check east post to see if it's current and add to the html
				 foreach($myposts as $post) {
					$current_post = '';
					if($postid == $post->ID){
						$current_post = ' class="current-post"';
						$current = ' current-cat';
					}
					$postlist .= "\n".'
<li'.$current_post.'><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>

';
				 }

$postlist .= "\n".'</ul>

// Add the post list to the code of the current category
				$code = str_replace('</a>', '</a>'.$postlist, $code);

}

// Put everything that was split before back together
		$cat = '
<li class="cat-item cat-item-'.$id.$current.'"><a'.$code;

}

// Add back into the complete category menu
	$catmenu .= $cat;
}

// Print out the category menu
echo '
<li id="menu">
<ul>'.$catmenu.'</ul>
</li>

// Get the id of the current post so we can give it a "current" class later.
$postid = $post->ID;

// Arguments for getting all the categories
$args = array(
'show_option_all'    => '',
'orderby'            => 'name',
'order'              => 'ASC',
'show_last_update'   => 0,
'style'              => 'list',
'show_count'         => 0,
'hide_empty'         => 1,
'use_desc_for_title' => 0,
'child_of'           => 0,
'feed'               => '',
'feed_type'          => '',
'feed_image'         => '',
'exclude'            => '',
'exclude_tree'       => '',
'include'            => '',
'hierarchical'       => true,
'title_li'           => '',
'number'             => NULL,
'echo'               => 0,
'depth'              => 0,
'current_category'   => 1,
'pad_counts'         => 0,
'taxonomy'           => 'category' );

// Get all categories (in a silly html menu)
$catmenu = wp_list_categories( $args );

// Split the menu to get all categories sepparately
$cats = split('
") === False){

			// Arguments for getting the categorie's posts
			$args = array(
				'post_type' => 'post',
				'post_status' => 'published',
				'numberposts' => -1,
				'category' => $id
				); 

			// Get the posts
			 $myposts = get_posts($args);

			 // If we got any posts returned
			 if(count($myposts)){

				// Start a nice html post list
				$postlist = "\n".'
';

				// Check east post to see if it's current and add to the html
				 foreach($myposts as $post) {
					$current_post = '';
					if($postid == $post->ID){
						$current_post = ' class="current-post"';
						$current = ' current-cat';
					}
					$postlist .= "\n".'
'.$post->post_title.'

';
				 }

				 $postlist .= "\n".'

';

				// Add the post list to the code of the current category
				$code = str_replace('', ''.$postlist, $code);

			}

		}

		// Put everything that was split before back together
		$cat = '

'.$catmenu.'


';

And here is the javascript code I added to my template’s header.php:

// Initialise javascript functions using jquery
jQuery(document).ready(function(){
 
        initMenu();
 
});
 
// Start the menu functionality
function initMenu(){
        // Hide all the submenus by default
        jQuery('#menu ul ul').hide();
 
        // Find the current post and make sure all the categories it's in are also "current", then show their kids.
        jQuery('#menu .current-post').parents('li[id!=menu]').addClass('current-cat').children('ul').show();
 
        // Replace the click event of all category menu items except for "news"
        // In stead make them fold down and up the sub menu
        jQuery('#menu a').click(function(event){
 
                thisItem = jQuery(this);
 
                childList = thisItem.siblings('ul');
 
                if(childList.length){
 
                        if(!(thisItem.html() == 'News' && childList.is(':hidden'))){
 
                                event.preventDefault();
 
                                if(childList.is(':hidden')){
 
                                        thisItem.addClass('clicked');
 
                                        childList.slideDown('fast');
 
                                        jQuery('#menu ul:visible').each(function(){
 
                                                if(!(jQuery('.clicked', this).length || jQuery(this).siblings('.clicked').length)){
                                                        jQuery(this).slideUp('fast');
                                                }
 
                                        });
 
                                        thisItem.removeClass('clicked');
 
                                }else{
                                        childList.slideUp('fast');
                                }
                        }
 
                }
 
        });
}

Display clean javascript code for copying

// Initialise javascript functions using jquery
jQuery(document).ready(function(){

initMenu();

});

// Start the menu functionality
function initMenu(){
	// Hide all the submenus by default
	jQuery('#menu ul ul').hide();

// Find the current post and make sure all the categories it's in are also "current", then show their kids.
	jQuery('#menu .current-post').parents('li[id!=menu]').addClass('current-cat').children('ul').show();

// Replace the click event of all category menu items except for "news"
	// In stead make them fold down and up the sub menu
	jQuery('#menu a').click(function(event){

thisItem = jQuery(this);

childList = thisItem.siblings('ul');

if(childList.length){

if(!(thisItem.html() == 'News' && childList.is(':hidden'))){

event.preventDefault();

if(childList.is(':hidden')){

thisItem.addClass('clicked');

childList.slideDown('fast');

jQuery('#menu ul:visible').each(function(){

if(!(jQuery('.clicked', this).length || jQuery(this).siblings('.clicked').length)){
							jQuery(this).slideUp('fast');
						}

});

thisItem.removeClass('clicked');

}else{
					childList.slideUp('fast');
				}
			}

}

});
}

// Initialise javascript functions using jquery
jQuery(document).ready(function(){

	initMenu();

});

// Start the menu functionality
function initMenu(){
	// Hide all the submenus by default
	jQuery('#menu ul ul').hide();

	// Find the current post and make sure all the categories it's in are also "current", then show their kids.
	jQuery('#menu .current-post').parents('li[id!=menu]').addClass('current-cat').children('ul').show();

	// Replace the click event of all category menu items except for "news"
	// In stead make them fold down and up the sub menu
	jQuery('#menu a').click(function(event){

		thisItem = jQuery(this);

		childList = thisItem.siblings('ul');

		if(childList.length){

			if(!(thisItem.html() == 'News' && childList.is(':hidden'))){

				event.preventDefault();

				if(childList.is(':hidden')){

					thisItem.addClass('clicked');

					childList.slideDown('fast');

					jQuery('#menu ul:visible').each(function(){

						if(!(jQuery('.clicked', this).length || jQuery(this).siblings('.clicked').length)){
							jQuery(this).slideUp('fast');
						}

					});

					thisItem.removeClass('clicked');

				}else{
					childList.slideUp('fast');
				}
			}

		}

	});
}

Tags: HTML, Php, Web development Posted in Javascript

Html symbols

Wednesday, March 17th, 2010

Character	Entity	Decimal	Hex	Rendering in Your Browser
Character	Entity	Decimal	Hex	Entity	Decimal	Hex
Latin small f with hook = function = florin	&fnof;	ƒ	ƒ	ƒ	ƒ	ƒ
Greek capital letter alpha	Α	Α	Α	Α	Α	Α
Greek capital letter beta	Β	Β	Β	Β	Β	Β
Greek capital letter gamma	Γ	Γ	Γ	Γ	Γ	Γ
Greek capital letter delta	Δ	Δ	Δ	Δ	Δ	Δ
Greek capital letter epsilon	Ε	Ε	Ε	Ε	Ε	Ε
Greek capital letter zeta	Ζ	Ζ	Ζ	Ζ	Ζ	Ζ
Greek capital letter eta	Η	Η	Η	Η	Η	Η
Greek capital letter theta	Θ	Θ	Θ	Θ	Θ	Θ
Greek capital letter iota	Ι	Ι	Ι	Ι	Ι	Ι
Greek capital letter kappa	Κ	Κ	Κ	Κ	Κ	Κ
Greek capital letter lambda	Λ	Λ	Λ	Λ	Λ	Λ
Greek capital letter mu	Μ	Μ	Μ	Μ	Μ	Μ
Greek capital letter nu	Ν	Ν	Ν	Ν	Ν	Ν
Greek capital letter xi	Ξ	Ξ	Ξ	Ξ	Ξ	Ξ
Greek capital letter omicron	Ο	Ο	Ο	Ο	Ο	Ο
Greek capital letter pi	Π	Π	Π	Π	Π	Π
Greek capital letter rho	Ρ	Ρ	Ρ	Ρ	Ρ	Ρ
Greek capital letter sigma	Σ	Σ	Σ	Σ	Σ	Σ
Greek capital letter tau	Τ	Τ	Τ	Τ	Τ	Τ
Greek capital letter upsilon	Υ	Υ	Υ	Υ	Υ	Υ
Greek capital letter phi	Φ	Φ	Φ	Φ	Φ	Φ
Greek capital letter chi	Χ	Χ	Χ	Χ	Χ	Χ
Greek capital letter psi	Ψ	Ψ	Ψ	Ψ	Ψ	Ψ
Greek capital letter omega	Ω	Ω	Ω	Ω	Ω	Ω
Greek small letter alpha	α	α	α	α	α	α
Greek small letter beta	β	β	β	β	β	β
Greek small letter gamma	γ	γ	γ	γ	γ	γ
Greek small letter delta	δ	δ	δ	δ	δ	δ
Greek small letter epsilon	ε	ε	ε	ε	ε	ε
Greek small letter zeta	ζ	ζ	ζ	ζ	ζ	ζ
Greek small letter eta	η	η	η	η	η	η
Greek small letter theta	θ	θ	θ	θ	θ	θ
Greek small letter iota	ι	ι	ι	ι	ι	ι
Greek small letter kappa	κ	κ	κ	κ	κ	κ
Greek small letter lambda	λ	λ	λ	λ	λ	λ
Greek small letter mu	μ	μ	μ	μ	μ	μ
Greek small letter nu	ν	ν	ν	ν	ν	ν
Greek small letter xi	ξ	ξ	ξ	ξ	ξ	ξ
Greek small letter omicron	ο	ο	ο	ο	ο	ο
Greek small letter pi	π	π	π	π	π	π
Greek small letter rho	ρ	ρ	ρ	ρ	ρ	ρ
Greek small letter final sigma	&sigmaf;	ς	ς	ς	ς	ς
Greek small letter sigma	σ	σ	σ	σ	σ	σ
Greek small letter tau	τ	τ	τ	τ	τ	τ
Greek small letter upsilon	υ	υ	υ	υ	υ	υ
Greek small letter phi	φ	φ	φ	φ	φ	φ
Greek small letter chi	χ	χ	χ	χ	χ	χ
Greek small letter psi	ψ	ψ	ψ	ψ	ψ	ψ
Greek small letter omega	ω	ω	ω	ω	ω	ω
Greek small letter theta symbol	&thetasym;	ϑ	ϑ	ϑ	ϑ	ϑ
Greek upsilon with hook symbol	&upsih;	ϒ	ϒ	ϒ	ϒ	ϒ
Greek pi symbol	ϖ	ϖ	ϖ	ϖ	ϖ	ϖ
bullet = black small circle	•	•	•	•	•	•
horizontal ellipsis = three dot leader	…	…	…	…	…	…
prime = minutes = feet	′	′	′	′	′	′
double prime = seconds = inches	″	″	″	″	″	″
overline = spacing overscore	&oline;	‾	‾	‾	‾	‾
fraction slash	&frasl;	⁄	⁄	⁄	⁄	⁄
script capital P = power set = Weierstrass p	&weierp;	℘	℘	℘	℘	℘
blackletter capital I = imaginary part	&image;	ℑ	ℑ	ℑ	ℑ	ℑ
blackletter capital R = real part symbol	&real;	ℜ	ℜ	ℜ	ℜ	ℜ
trade mark sign	™	™	™	™	™	™
alef symbol = first transfinite cardinal	&alefsym;	ℵ	ℵ	ℵ	ℵ	ℵ
leftwards arrow	←	←	←	←	←	←
upwards arrow	↑	↑	↑	↑	↑	↑
rightwards arrow	→	→	→	→	→	→
downwards arrow	↓	↓	↓	↓	↓	↓
left right arrow	↔	↔	↔	↔	↔	↔
downwards arrow with corner leftwards = carriage return	&crarr;	↵	↵	↵	↵	↵
leftwards double arrow	⇐	⇐	⇐	⇐	⇐	⇐
upwards double arrow	&uArr;	⇑	⇑	⇑	⇑	⇑
rightwards double arrow	⇒	⇒	⇒	⇒	⇒	⇒
downwards double arrow	&dArr;	⇓	⇓	⇓	⇓	⇓
left right double arrow	⇔	⇔	⇔	⇔	⇔	⇔
for all	∀	∀	∀	∀	∀	∀
partial differential	∂	∂	∂	∂	∂	∂
there exists	∃	∃	∃	∃	∃	∃
empty set = null set = diameter	∅	∅	∅	∅	∅	∅
nabla = backward difference	∇	∇	∇	∇	∇	∇
element of	∈	∈	∈	∈	∈	∈
not an element of	∉	∉	∉	∉	∉	∉
contains as member	&ni;	∋	∋	∋	∋	∋
n-ary product = product sign	∏	∏	∏	∏	∏	∏
n-ary sumation	∑	∑	∑	∑	∑	∑
minus sign	−	−	−	−	−	−
asterisk operator	&lowast;	∗	∗	∗	∗	∗
square root = radical sign	√	√	√	√	√	√
proportional to	&prop;	∝	∝	∝	∝	∝
infinity	∞	∞	∞	∞	∞	∞
angle	&ang;	∠	∠	∠	∠	∠
logical and = wedge	&and;	∧	∧	∧	∧	∧
logical or = vee	&or;	∨	∨	∨	∨	∨
intersection = cap	∩	∩	∩	∩	∩	∩
union = cup	∪	∪	∪	∪	∪	∪
integral	∫	∫	∫	∫	∫	∫
therefore	&there4;	∴	∴	∴	∴	∴
tilde operator = varies with = similar to	&sim;	∼	∼	∼	∼	∼
approximately equal to	&cong;	≅	≅	≅	≅	≅
almost equal to = asymptotic to	≈	≈	≈	≈	≈	≈
not equal to	≠	≠	≠	≠	≠	≠
identical to	&equiv;	≡	≡	≡	≡	≡
less-than or equal to	≤	≤	≤	≤	≤	≤
greater-than or equal to	≥	≥	≥	≥	≥	≥
subset of	⊂	⊂	⊂	⊂	⊂	⊂
superset of	⊃	⊃	⊃	⊃	⊃	⊃
not a subset of	&nsub;	⊄	⊄	⊄	⊄	⊄
subset of or equal to	&sube;	⊆	⊆	⊆	⊆	⊆
superset of or equal to	&supe;	⊇	⊇	⊇	⊇	⊇
circled plus = direct sum	&oplus;	⊕	⊕	⊕	⊕	⊕
circled times = vector product	&otimes;	⊗	⊗	⊗	⊗	⊗
up tack = orthogonal to = perpendicular	&perp;	⊥	⊥	⊥	⊥	⊥
dot operator	⋅	⋅	⋅	⋅	⋅	⋅
left ceiling = APL upstile	&lceil;	⌈	⌈	⌈	⌈	⌈
right ceiling	&rceil;	⌉	⌉	⌉	⌉	⌉
left floor = APL downstile	&lfloor;	⌊	⌊	⌊	⌊	⌊
right floor	&rfloor;	⌋	⌋	⌋	⌋	⌋
left-pointing angle bracket = bra	&lang;	〈	〈	⟨	〈	〈
right-pointing angle bracket = ket	&rang;	〉	〉	⟩	〉	〉
lozenge	&loz;	◊	◊	◊	◊	◊
black spade suit	&spades;	♠	♠	♠	♠	♠
black club suit = shamrock	&clubs;	♣	♣	♣	♣	♣
black heart suit = valentine	&hearts;	♥	♥	♥	♥	♥
black diamond suit	&diams;	♦	♦	♦	♦	♦

Tags: HTML, Web development Posted in Other

Htaccess

Wednesday, March 17th, 2010

This is a very basic .htaccess file as I like to use it. It simply redirects any request to the index.php if it’s not an existing file and not an existing directory.

<IfModule mod_rewrite.c>
 
RewriteEngine On 
 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/? /index.php?loc=$1
 
</IfModule>

Display clean text code for copying

<IfModule mod_rewrite.c>

RewriteEngine On 

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/? /index.php?loc=$1

</IfModule>

It works as follows:

checks to see if mod-rewrite is enabled

You can add Options +FollowSymlinks on the line before RewriteEngine On
It needs to be enabled for mod rewrite to actually work

RewriteEngine On
Start the rewrite engine

RewriteCond %{REQUEST_FILENAME} !-f
Is a condition and returns true if the requested location is not an existing file.

RewriteCond %{REQUEST_FILENAME} !-d
Is a condition and returns true if the location is not an existing directory.

RewriteRule ^(.*)/? /index.php?loc=$1
Does the actual redirection, basicly it takes everything from behind http://www.mysite.domain/ and puts it behind loc=
So inside your index.php you can get the url as $_GET['loc']
You can then use PHP to analyse what was requested.

</IfModule>
The end of the rewriting.

There are lots of more complicated things you can do, but this is what I need more often and it does only the thing I need… which is good.

Tags: HTML, Snippet, Web development Posted in Other