Create Breadcrumbs to WordPress without Plugin
Breadcrumbs is an indispensable component for the massive menu system. It helps users to easily migrate to the site they want. It also is a tool for SEO, help you increase your ability to search on Google. This article will address the programming you are passionate about and want to manually create your own functions for your site. If you do want to use the plugin, you can take see BreadCrumb NavXT.
We will proceed to insert breadcrumbs into your WordPress page by the following steps:
Step 1: Open the functions.php file in your theme folder. Then copy and paste the following code inside it:
<?php
function wp_bac_breadcrumb()
{
$delimiter = '<span> » </span>';
$delimiter1 = '<span> • </span>';
$main = 'Home';
$maxLength= 30;
$arc_year = get_the_time('Y');
$arc_month = get_the_time('F');
$arc_day = get_the_time('d');
$arc_day_full = get_the_time('l');
$url_year = get_year_link($arc_year);
$url_month = get_month_link($arc_year,$arc_month);
if (!is_front_page())
{
echo '<div>';
global $post, $cat;
echo 'You are here: <a href="' . $homeLink . '">' . $main . '</a>' . $delimiter;
if (is_single())
{
$category = get_the_category();
$num_cat = count($category);
if ($num_cat <=1)
{
echo get_category_parents($category[0], true,' ' . $delimiter . ' ');
echo ' ' . get_the_title();
}
else
{
echo the_category( $delimiter1, multiple);
if (strlen(get_the_title()) >= $maxLength)
{
echo ' ' . $delimiter . trim(substr(get_the_title(), 0, $maxLength)) . ' ...';
}
else
{
echo ' ' . $delimiter . get_the_title();
}
}
}
elseif (is_category())
{
echo 'Archive Category: "' . get_category_parents($cat, true,' ' . $delimiter . ' ') . '"' ;
}
elseif ( is_tag() )
{
echo 'Posts Tagged: "' . single_tag_title("", false) . '"';
}
elseif ( is_day())
{
echo '<a href="' . $url_year . '">' . $arc_year . '</a> ' . $delimiter . ' ';
echo '<a href="' . $url_month . '">' . $arc_month . '</a> ' . $delimiter . $arc_day . ' (' . $arc_day_full . ')';
}
elseif ( is_month() )
{
echo '<a href="' . $url_year . '">' . $arc_year . '</a> ' . $delimiter . $arc_month;
}
elseif ( is_year() )
{
echo $arc_year;
}
elseif ( is_search() )
{
echo 'Search Results for: "' . get_search_query() . '"';
}
elseif ( is_page() && !$post->post_parent )
{
echo get_the_title();
}
elseif ( is_page() && $post->post_parent )
{
$post_array = get_post_ancestors($post);
krsort($post_array);
foreach($post_array as $key=>$postid)
{
$post_ids = get_post($postid);
$title = $post_ids->post_title;
echo '<a href="' . get_permalink($post_ids) . '">' . $title . '</a>' . $delimiter;
}
the_title();
}
elseif ( is_author() )
{
global $author;
$user_info = get_userdata($author);
echo 'Archived Article(s) by Author: ' . $user_info->display_name ;
}
elseif ( is_404() )
{
echo 'Error 404 - Not Found.';
}
else
{
}
echo '</div>';
}
}
?>Step 2: You locate the header.php file is also located on the same position file funcitons.php and paste the following code inside it:
<?php
if (function_exists('wp_bac_breadcrumb'))
{
wp_bac_breadcrumb();
}
?>Have you noticed that you can paste the above code is located in the position where you want breadcrumbs are displayed.
Step 3: Create css breadcrumbs.
Creating breadcrumbs as that is done, now we just need to add some css for the effect it running smoothly. You can copy the following code to the style.css in your theme folder.
.breadcrumb{
width:645px;
float:left;
padding:0 0 0 47px;
margin:9px 0 0 0;
font-size:90%;
clear:both;
}
.delimiter{
color:#000;
background-color:inherit;
}
.delimiter1{
color: #627FC3;
background-color:inherit;
}source: thuthuatweb
