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>

winebarstore.com

A startup venture using Magento as a company sponsored, team-building effort where my team created the dropshipping site, winebarstore.com.  It was an opportunity to discover a viable product using Google Ad Word tools, using social media marketing while having our own choice in an e-commerce platform.  Of course being picked to be a team captain, Magento was a none debated choice.

How to remove index.php from the URL of a new install of a Magento Store

How to remove index.php from the URL of a new install Magento Store

sudo vi .htaccess

uncomment

# RewriteBase /magento/

and change it to

RewriteBase /

Since I had a newly install version of Ubuntu web server, I needed to enable ModRewrite in apache

sudo a2enmod rewrite

Then you need to restart apache

sudo /etc/init.d/apache2 restart

Then goto your admin panel and enable the Rewrites. You can find it at System->Configuration->Web->Search Engine Optimization

Then goto Cache management page (system cache management ) and refresh your cache and refresh the Web Rewrites.