How to Easily Install Awesome Font Icons into your WordPress

How to Easily Install Awesome Font Icons into your WordPress

Awesome fonts will let you embed social media icons, symbols, shapes, and fonts into WordPress post easily. You don’t need to embed or attached any images, all you have to do is to learn a trick. This article will help you install Awesome Fonts into your WordPress.

See examples here.

entypo font awesome

So let’s get started.

Step1. Download from their official site here and extract.

Step2. Copying and Uploading

Copy and Upload css and font folder into your wordpress theme directory e.g. /wp-content/themes/your-theme/awesome/

Note: /awesome/ you can create your own folder/directory

awesome css fonts

Step3. In your function.php add these following lines.

if ( !function_exists( 'awesome_fonts_css' ) ) {

		function awesome_fonts_css() {
			wp_enqueue_style( 'font-awesome-id', get_template_directory_uri() . '/awesome/css/font-awesome.min.css', false, '3.2.1' );		
		}
}
if (!is_admin())
		add_action('wp_enqueue_scripts', 'awesome_fonts_css');

Optional:
If you want IE7 support, add this few lines in the header.php just after !Doctype declaration.

<!--[if IE 7 ]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/awesome/css/font-awesome-ie7.min.css">
<![endif]-->

Step 4. Testing Add New Post Text view (not Visual) add these following lines

<a class="btn" href="#">
  <i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#">
  <i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#">
  <i class="icon-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#">
  <i class="icon-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#">
  <i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#">
  <i class="icon-cog"></i> Settings</a>
<a class="btn btn-large btn-danger" href="#">
  <i class="icon-flag icon-2x pull-left"></i> Font Awesome
Version 3.2.1</a>
<a class="btn btn-primary" href="#">
  <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

Great job! You have successfully installed it. You can get some more examples at

http://fortawesome.github.io/Font-Awesome/examples/

There are many font-face tricks in the internet, I like also Entypo 250+ carefully crafted pictograms, you can also play on that using the same method. Also check the compatibility across browsers for the finest showcasing it.

Although there is a plugin that you can play relating to this feature called FontAwesomeIcons, but our main goal here is to make our WP codes clean and free from excessive files that might cause your page’s slow loading time.

Install Rich Snippets Breadcrumbs into WordPress

Breadcrumbs function will improve user experience when user navigates your website. Specifically it will show your user the hierarchy of pages from the home page so they will be guided by a dynamic link from a particular page link to homepage link.

There are plugins available for this function but you don’t really need to install it if you’re will to do an experiment for a powerful trick and erratic plugins will cause your website to load slow on browsers so I think its practical to technically know what you are doing or do a backup first.

So let’s get started.

First you need to edit your function.php under your current theme you are using add these following lines.

Insert in your function.php File

if (!function_exists('innovedesignswp_breadcrumb_lists')) :

function innovedesignswp_breadcrumb_lists() {

	/* === OPTIONS === */
	$text['home']     = 'Home'; // string for the 'Home' link
	$text['category'] = 'Published in &#39;%s&#39;'; // string for a category page
	$text['search']   = 'Query results "%s"'; // string for a search results page
	$text['tag']      = 'Tagged in "%s"'; // string for a tag page
	$text['author']   = 'Published by %s'; // string for an author page
	$text['404']      = 'Page Not Found'; // string for the 404 page

	$show_current   = 1; // 1 - show current post, page, or category title in breadcrumbs, 0 - if you don't want to show
	$show_on_home   = 0; // 1 - show breadcrumbs on the homepage, 0 - if you don't want to show
	$show_home_link = 1; // 1 - show the 'Home' link, 0 - if you don't want to show
	$show_title     = 1; // 1 - show the title for the links, 0 - if you don't want to show
	$delimiter      = ''; // delimiter between crumbs
	$before         = '
	<li class="current"><span>'; // html element before current link
	$after          = '</span></li>
'; // closing span element
	/* === END OF OPTIONS === */

	global $post;
	$home_link    = home_url('/');
	$link_before  = '
	<li itemtype="http://data-vocabulary.org/Breadcrumb" itemscope>';
	$link_after   = '</li>
';
	$link_attr    = ' itemprop="url"';
	$itemproptitle_before = '<span itemprop="title">';
	$itemproptitle_after = '</span>';
	$link         = $link_before . '<a' . $link_attr . ' href="%1$s">' . $itemproptitle_before . '%2$s' . $itemproptitle_after . '</a>' . $link_after;
	$parent_id    = $parent_id_2 = $post->post_parent;
	$frontpage_id = get_option('page_on_front');

	if (is_home() || is_front_page()) {

		if ($show_on_home == 1) echo '
<div class="breadcrumbs">
<ul>' .$link_before. '<a href="' . $home_link . '">' . $itemproptitle_before . $text['home'] . $itemproptitle_after . '</a>' .$link_after. '</div>
';

	} else {

		echo '
<div class="breadcrumb">
<ul class="ul-crumb">';
		if ($show_home_link == 1) {
			echo '' . $link_before . '<a href="' . $home_link . '" ' . $link_attr . '>' . $itemproptitle_before . $text['home'] . $itemproptitle_after . '</a>' . $link_after;
			if ($frontpage_id == 0 || $parent_id != $frontpage_id) echo $delimiter;
		}

		if ( is_category() ) {
			$this_cat = get_category(get_query_var('cat'), false);
			if ($this_cat->parent != 0) {
				$cats = get_category_parents($this_cat->parent, TRUE, $delimiter);
				if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
				$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
				$cats = str_replace('">', '"> ' . $itemproptitle_before, $cats);
				$cats = str_replace('</a>', $itemproptitle_after . '</a>' . $link_after, $cats);
				if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
				echo $cats;
			}
			if ($show_current == 1) echo $before . sprintf($text['category'], single_cat_title('', false)) . $after;

		} elseif ( is_search() ) {
			echo $before . sprintf($text['search'], get_search_query()) . $after;

		} elseif ( is_day() ) {
			echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
			echo sprintf($link, get_month_link(get_the_time('Y'),get_the_time('m')), get_the_time('F')) . $delimiter;
			echo $before . get_the_time('d') . $after;

		} elseif ( is_month() ) {
			echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
			echo $before . get_the_time('F') . $after;

		} elseif ( is_year() ) {
			echo $before . get_the_time('Y') . $after;

		} elseif ( is_single() && !is_attachment() ) {
			if ( get_post_type() != 'post' ) {
				$post_type = get_post_type_object(get_post_type());
				$slug = $post_type->rewrite;
				printf($link, $home_link . '/' . $slug['slug'] . '/', $post_type->labels->singular_name);
				if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;
			} else {
				$cat = get_the_category(); 
				$cat = $cat[0];
				$cats = get_category_parents($cat, TRUE, $delimiter);
				if ($show_current == 0) 
				$cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
				$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
				$cats = str_replace('">', '"> ' . $itemproptitle_before, $cats);
				$cats = str_replace('</a>', $itemproptitle_after . '</a>' . $link_after, $cats);
				if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
				echo $cats;
				if ($show_current == 1) echo $before . get_the_title() . $after;
			}

		} elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
			$post_type = get_post_type_object(get_post_type());
			echo $before . $post_type->labels->singular_name . $after;

		} elseif ( is_attachment() ) {
			$parent = get_post($parent_id);
			$cat = get_the_category($parent->ID); 
			$cat = $cat[0];
			$cats = get_category_parents($cat, TRUE, $delimiter);
			$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
			$cats = str_replace('">', '"> ' . $itemproptitle_before, $cats);
			$cats = str_replace('</a>', $itemproptitle_after . '</a>' . $link_after, $cats);
			if ($show_title == 0) 
			$cats = preg_replace('/ title="(.*?)"/', '', $cats);
			echo $cats;
			printf($link, get_permalink($parent), $parent->post_title);
			if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;

		} elseif ( is_page() && !$parent_id ) {
			if ($show_current == 1) echo $before . get_the_title() . $after;

		} elseif ( is_page() && $parent_id ) {
			if ($parent_id != $frontpage_id) {
				$breadcrumbs = array();
				while ($parent_id) {
					$page = get_page($parent_id);
					if ($parent_id != $frontpage_id) {
						$breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
					}
					$parent_id = $page->post_parent;
				}
				$breadcrumbs = array_reverse($breadcrumbs);
				for ($i = 0; $i < count($breadcrumbs); $i++) {
					echo $breadcrumbs[$i];
					if ($i != count($breadcrumbs)-1) echo $delimiter;
				}
			}
			if ($show_current == 1) {
				if ($show_home_link == 1 || ($parent_id_2 != 0 && $parent_id_2 != $frontpage_id)) echo $delimiter;
				echo $before . get_the_title() . $after;
			}

		} elseif ( is_tag() ) {
			echo $before . sprintf($text['tag'], single_tag_title('', false)) . $after;

		} elseif ( is_author() ) {
	 		global $author;
			$userdata = get_userdata($author);
			echo $before . sprintf($text['author'], $userdata->display_name) . $after;

		} elseif ( is_404() ) {
			echo $before . $text['404'] . $after;
		}

		if ( get_query_var('paged') ) {
			if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
			  printf( __('Pages', '' ) . ' ' . get_query_var('paged') );
			if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
		}

		echo '</ul>
</div>
<!-- .breadcrumbs -->';

	}
} 
endif;

In your Php controller most likely in your header.php file that controls your page, post, archives, etc after your tag. Insert this following code.

Insert in your header.php

<?php innovedesignswp_breadcrumb_lists(); ?>

Good job! You have a pretty made breadcrumbs for your WordPress Theme you can also adjust it in your CSS by copying this code:

Insert in your style.css

.breadcrumb {
	display: block;
}
.breadcrumb ul.ul-crumb li:last-child:after {
    content: "";
}
.breadcrumb ul.ul-crumb li:after {
    content: "»";
    padding-left: 10px;
}
.breadcrumb ul.ul-crumb li {
    display: inline;
    padding-right: 10px;
}

 

Breadcrumb Features

This breadcrumb for WordPress appears to the following pages:

  • HTML5 Markup Validator Passed :D
  • Post
  • Page
  • Tags
  • Category
  • Daily Archive
  • Monthly Archive
  • Yearly Archive
  • Author
  • Attachment
  • Search Results
  • 404 Error Page
  • Breadcrumbs in Google Rich Snippet (like what you can see below)

breadcrums rich snippet

 
Some of you are looking for your solution on prompting “Error found while checking this document as HTML5!”, HTML content marked up with RDFa is actually not recognized as HTML5 !Doctype, your option is to convert it to Microdata instead. You may encounter these results below:

 Line 78, Column 80: Attribute xmlns:v not allowed here.
…s:v="http://rdf.data-vocabulary.org/#"&gt;&lt;span typeof="v:Brea…

 Line 78, Column 80: Attribute with the local name xmlns:v is not serializable as XML 1.0.
…s:v="http://rdf.data-vocabulary.org/#"&gt;&lt;span typeof="v:Brea…

To some it up.. if you need to have a clean breadcrumb function for WordPress, why not to try or install this code in your theme.. If you are having a difficulty installing it, I may provide you a plugin for you to install it smoothly. Or leave me a message if you have any questions.
Thanks!

-Source: Dimox.net

WordPress Category Link HTML 5 Validation Errors

When I conducted an HTML5 validation check using W3 Validator for our client’s WordPress website, I eventually found this error

rel category tag
Line 141, Column 114: Bad value category tag for attribute rel on element a: The string category is not a registered keyword or absolute URL.

In HTML5, alt=”rel category tag” attribute is considered as bad value category tag by W3 Validator. So here my solution, I replace the similar line

<p>Categories: <?php the_category(' '); ?></p>

to

<?php
$category = get_the_category();
$separate = ', ';
$output = '';
if($category){
foreach($category as $cat) {
$output .= '<a href="'.get_category_link( $cat->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $cat->name ) ) . '">'.$cat->cat_name.'</a>'.$separate;
}
echo trim($output, $separate);
}
?>

I hope this tweak will also work for you.

Cheers,