macouno.com » HTML

Making a category based menu with posts in wordpress 2.9.2

Dolf Veenvliet — Sun, 23 May 2010 09:07:32 +0000

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('
$catmenu);

$catmenu = '';

// Loop through the categories.

foreach($cats as $key => $cat){

$current = '';

// Get the code and html sepparately

list($id, $code) = split('">, $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, "

)

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".'

.$current_post.'>($post->ID).'">'.$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 = '

$id.$current.'">.$code;

}

// Add back into the complete category menu

$catmenu .= $cat;

}

// Print out the category menu

echo '

$catmenu

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('
") === 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');
				}
			}

		}

	});
}

Html symbols

Dolf Veenvliet — Wed, 17 Mar 2010 18:40:27 +0000

Character	Entity	Decimal	Hex	Rendering in Your Browser
Character	Entity	Decimal	Hex	Entity	Decimal	Hex
Latin small f with hook = function = florin	ƒ	ƒ	ƒ	ƒ	ƒ	ƒ
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	ς	ς	ς	ς	ς	ς
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	ϑ	ϑ	ϑ	ϑ	ϑ	ϑ
Greek upsilon with hook symbol	ϒ	ϒ	ϒ	ϒ	ϒ	ϒ
Greek pi symbol	ϖ	ϖ	ϖ	ϖ	ϖ	ϖ
bullet = black small circle	•	•	•	•	•	•
horizontal ellipsis = three dot leader	…	…	…	…	…	…
prime = minutes = feet	′	′	′	′	′	′
double prime = seconds = inches	″	″	″	″	″	″
overline = spacing overscore	‾	‾	‾	‾	‾	‾
fraction slash	⁄	⁄	⁄	⁄	⁄	⁄
script capital P = power set = Weierstrass p	℘	℘	℘	℘	℘	℘
blackletter capital I = imaginary part	ℑ	ℑ	ℑ	ℑ	ℑ	ℑ
blackletter capital R = real part symbol	ℜ	ℜ	ℜ	ℜ	ℜ	ℜ
trade mark sign	™	™	™	™	™	™
alef symbol = first transfinite cardinal	ℵ	ℵ	ℵ	ℵ	ℵ	ℵ
leftwards arrow	←	←	←	←	←	←
upwards arrow	↑	↑	↑	↑	↑	↑
rightwards arrow	→	→	→	→	→	→
downwards arrow	↓	↓	↓	↓	↓	↓
left right arrow	↔	↔	↔	↔	↔	↔
downwards arrow with corner leftwards = carriage return	↵	↵	↵	↵	↵	↵
leftwards double arrow	⇐	⇐	⇐	⇐	⇐	⇐
upwards double arrow	⇑	⇑	⇑	⇑	⇑	⇑
rightwards double arrow	⇒	⇒	⇒	⇒	⇒	⇒
downwards double arrow	⇓	⇓	⇓	⇓	⇓	⇓
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	∋	∋	∋	∋	∋	∋
n-ary product = product sign	∏	∏	∏	∏	∏	∏
n-ary sumation	∑	∑	∑	∑	∑	∑
minus sign	−	−	−	−	−	−
asterisk operator	∗	∗	∗	∗	∗	∗
square root = radical sign	√	√	√	√	√	√
proportional to	∝	∝	∝	∝	∝	∝
infinity	∞	∞	∞	∞	∞	∞
angle	∠	∠	∠	∠	∠	∠
logical and = wedge	∧	∧	∧	∧	∧	∧
logical or = vee	∨	∨	∨	∨	∨	∨
intersection = cap	∩	∩	∩	∩	∩	∩
union = cup	∪	∪	∪	∪	∪	∪
integral	∫	∫	∫	∫	∫	∫
therefore	∴	∴	∴	∴	∴	∴
tilde operator = varies with = similar to	∼	∼	∼	∼	∼	∼
approximately equal to	≅	≅	≅	≅	≅	≅
almost equal to = asymptotic to	≈	≈	≈	≈	≈	≈
not equal to	≠	≠	≠	≠	≠	≠
identical to	≡	≡	≡	≡	≡	≡
less-than or equal to	≤	≤	≤	≤	≤	≤
greater-than or equal to	≥	≥	≥	≥	≥	≥
subset of	⊂	⊂	⊂	⊂	⊂	⊂
superset of	⊃	⊃	⊃	⊃	⊃	⊃
not a subset of	⊄	⊄	⊄	⊄	⊄	⊄
subset of or equal to	⊆	⊆	⊆	⊆	⊆	⊆
superset of or equal to	⊇	⊇	⊇	⊇	⊇	⊇
circled plus = direct sum	⊕	⊕	⊕	⊕	⊕	⊕
circled times = vector product	⊗	⊗	⊗	⊗	⊗	⊗
up tack = orthogonal to = perpendicular	⊥	⊥	⊥	⊥	⊥	⊥
dot operator	⋅	⋅	⋅	⋅	⋅	⋅
left ceiling = APL upstile	⌈	⌈	⌈	⌈	⌈	⌈
right ceiling	⌉	⌉	⌉	⌉	⌉	⌉
left floor = APL downstile	⌊	⌊	⌊	⌊	⌊	⌊
right floor	⌋	⌋	⌋	⌋	⌋	⌋
left-pointing angle bracket = bra	⟨	〈	〈	⟨	〈	〈
right-pointing angle bracket = ket	⟩	〉	〉	⟩	〉	〉
lozenge	◊	◊	◊	◊	◊	◊
black spade suit	♠	♠	♠	♠	♠	♠
black club suit = shamrock	♣	♣	♣	♣	♣	♣
black heart suit = valentine	♥	♥	♥	♥	♥	♥
black diamond suit	♦	♦	♦	♦	♦	♦

Htaccess

Dolf Veenvliet — Wed, 17 Mar 2010 18:36:39 +0000

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.


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

Display clean text code for copying



RewriteEngine On 

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

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.

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.