Category Archives: How-to

How to Add CSS Styles to WordPress Breadcrumbs

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 } ?>

WordPress custom menu link target _blank

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>

Redirect url to a page after importing posts

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/

Adding Text to the Sidebar

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