Archive for the 'How-to' category

10 Most Used Web Development Tools

Sep 03 2013 Published by under How-to

Strong Password Generator
strongpasswordgenerator.com

Advanced CSS topics
alistapart.com

Rounded Corners
border-radius.com

Image Placeholders
placehold.it

Favicon Generators
www.favicon.cc

Gradient Generator
www.colorzilla.com/gradient-editor

Color Picker
www.colorpicker.com

Color themes
kuler.adobe.com/create/color-wheel

Free icons
raphaeljs.com/icons

CSS Shadows
www.cssmatic.com/box-shadow

No responses yet

How to Add CSS Styles to WordPress Breadcrumbs

Feb 08 2013 Published by under How-to, Wordpress

functions.php

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

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

page.php

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

nav-above-page.php

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

includes/breadcrumb-styles.php

<?php

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 );
	}
endforeach;

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;
endforeach;

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

No responses yet

WordPress custom menu link target _blank

Jan 24 2013 Published by under How-to, Wordpress

Problem

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.

Solution

Custom link nav-menu

 

jQuery('a[title="_blank"]').each(
	function(i) {
		jQuery(this).attr('target', '_blank');
		jQuery(this).attr('title', jQuery(this).text());
	}
);

Result

<a title=”_blank” href=”http://www2.allegiantair.com/”>Allegiant Air</a>

turns into

<a title=”Allegiant Air” href=”http://www2.allegiantair.com/” 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 easterniowasportsandrec.com. I created a new page that will be a section page for these posts at http://thegazette.com/sports/more/. So I need to redirect the old homepage, the old stories and the images. I added these three rules to the htaccess file on easterniowasportsandrec.com.

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

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

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

These are the example redirects:
redirect the homepage to a page
http://easterniowasportsandrec.com/

redirect an image
http://easterniowasportsandrec.com/files/2012/01/Iowa-vs.-Norhtwestern131-128×128.jpg

redirect a story
http://easterniowasportsandrec.com/2011/10/16/feels-like-spring-as-kernels-hold-pa-on-field-tryouts/

No responses yet

Committees and Board WordPress Plugin

May 13 2009 Published by under How-to, Wordpress

Displaying the Committees

menu

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.

httpv://www.youtube.com/watch?v=eh0-SMi7Y24

No responses yet