Archive for the 'How-to' category

10 Most Used Web Development Tools

Sep 03 2013 Published by under How-to

Strong Password Generator

Advanced CSS topics

Rounded Corners

Image Placeholders

Favicon Generators

Gradient Generator

Color Picker

Color themes

Free icons

CSS Shadows

No responses yet

How to Add CSS Styles to WordPress Breadcrumbs

Feb 08 2013 Published by under How-to, Wordpress


function get_page_parents( $id=0, $separator="/" ){
	$lineage = '<span>'.$itisme->post_title.'</span>';
	while( $parentID != 0 ){
		$lineage='<a href="' . get_permalink($parent->ID) . '">' . $parent->post_title . '</a>'.$separator.$lineage;
	return $lineage;

include 'includes/breadcrumb-styles.php';
add_action('wp_head', 'add_breadcrumb_styles');


<?php get_template_part( 'nav', 'above-page' ); ?>


<div id="page-bread-crumbs">
<a class="home" href="/">Home</a> &gt; <?php echo get_page_parents( $post->ID, " &gt; " ) ?>



global $eia_parents;

$eia_parents = array();

function build_menu_style( $menu_name, $color, $locations ) {

	global $eia_parents;

	$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

	$menu_items = wp_get_nav_menu_items($menu->term_id);

	$page_ids = array();

	foreach ( (array) $menu_items as $key => $menu_item ) {

		$page_id = $menu_item->object_id;

		echo '/* ' . $menu_item->title . ' */' . PHP_EOL;
		echo '.page-id-'.$page_id.' #page-bread-crumbs a,' . PHP_EOL;
		echo '.page-id-'.$page_id.' #page-bread-crumbs span {color:'.$color.';}' . PHP_EOL;

		if( $menu_item->post_parent && !array_key_exists( 'post_parent_id_'.$menu_item->post_parent, $eia_parents ) ) {
			array_push( $eia_parents, array( 'post_parent_id_'.$menu_item->post_parent => array('ID' => $menu_item, 'color' => $color ) ) );

	$page_ids = null;

function add_breadcrumb_styles() { ?><style type="text/css"><?php

global $eia_parents;

echo PHP_EOL;

$color1 = '#A08A42 /* book a flight (tan) */'; // tan /* book a flight */
$color2 = '#4AAAD6 /* check a flight (blue) */'; // blue /* check a flight */
$color3 = '#B25029 /* at the airport (burnt) */'; // burnt /* at the airport */
$color4 = '#40847A /* about the airport (green) */'; // green /* about the airport */

// update this array with the menus you wish to add styles from

$menu_locations = array(
	"home-subnav-1" => $color1,
	"home-subnav-2" => $color2,
	"home-subnav-3" => $color3,
	"home-subnav-4" => $color4

$locations = get_nav_menu_locations();

foreach( $menu_locations as $menu_name => $color ):
	if ( ( $locations ) && isset( $locations[ $menu_name ] ) ) {
		build_menu_style( $menu_name, $color, $locations );

foreach ($eia_parents as $parent):
	echo PHP_EOL . '/* ' . get_the_title( $parent_id ) . ' */' . PHP_EOL;
	echo '.parent-pageid-'.$parent['ID'].' #page-bread-crumbs a,' . PHP_EOL;
	echo '.parent-pageid-'.$parent['ID'].' #page-bread-crumbs span {color:'.$parent['color'].';}' . PHP_EOL. PHP_EOL;

?></style><?php } ?>

No responses yet

WordPress custom menu link target _blank

Jan 24 2013 Published by under How-to, Wordpress


In WordPress at least for custom links, it would be great to allow menu options to open in a new window/tab via the target=”_blank” element in the link tags. Controlling menus in the WP Menu tool is awesome, but many of the sites I work with have external links in the main navigation menus that need to open in a new tab.


Custom link nav-menu


	function(i) {
		jQuery(this).attr('target', '_blank');
		jQuery(this).attr('title', jQuery(this).text());


<a title=”_blank” href=””>Allegiant Air</a>

turns into

<a title=”Allegiant Air” href=”” target=”_blank”>Allegiant Air</a>

No responses yet

Redirect url to a page after importing posts

Feb 24 2012 Published by under How-to, Wordpress

After importing posts from one WordPress site to another, you need to set the htaccess file to direct the pages and images. Here’s what I used:

The old site where I exported posts is I created a new page that will be a section page for these posts at So I need to redirect the old homepage, the old stories and the images. I added these three rules to the htaccess file on

# redirect old homepage to new page
RewriteCond %{HTTP_HOST} ^$ [NC]
RewriteCond %{REQUEST_URI} ^\/$
RewriteRule ^(.*)$ [L,R=301]

# redirect files from old site /files/ to new site /wp-content/uploads/
RewriteCond %{HTTP_HOST} ^$ [NC]
RewriteRule ^(.*/)?files/(.*)$$2 [R=301,L]

# redirect every other page to match the post’s permalink on new site
RewriteCond %{HTTP_HOST} ^$ [NC]
RewriteRule ^(.*)$$1 [L,R=301]

These are the example redirects:
redirect the homepage to a page

redirect an image×128.jpg

redirect a story

No responses yet

Committees and Board WordPress Plugin

May 13 2009 Published by under How-to, Wordpress

Displaying the Committees


View Members

view members

Edit Member

edit member

Update Member

update member

Press the “add new member button”

add new member button

Add New Member

new member

No responses yet

Adding Text to the Sidebar

May 10 2009 Published by under How-to, Wordpress

You can add any text,HTML or JavaScript to the sidebar of your WordPress site.  The first thing you need to do after logging into the wp-admin is to select Widgets.

Select Widgets

Selecting Widgets

It’s possible that you have more than one sidebar, if you do select the desired sidebar you want to add text.

Select Sidebar

current sidebar

Add Text Widget

Now you add the Text Widget to the sidebar.
add text Widget

Editing the Text

edit text widget

Saving the text

Add the title for your text, add the text you want to display, press the done button and then press the save button. And you’re done. Visit your site to see the new text widget.
enter and save text

No responses yet

Making a Post Sticky

Dec 22 2008 Published by under How-to

Did you just create a post and now your previous post is too low on your page?  You can make your favorite post stick to the top of the page.


No responses yet