How to Replace the Default WordPress jQuery with a CDN

There are default scripts that comes with each WordPress installation. These scripts are at disposal of theme, and plugin authors to use in their work. From our experience, jQuery is one of the most used scripts in plugins, and themes. You are probably wondering why you should replace the default WordPress jQuery with a CDN or with the one from library like Google Library, and Microsoft Library? jQuery is being used on a lot of sites including the big ones, using jQuery with a CDN, Google Library, and Microsoft Library has become the standards for including scripts in web design. It could be because a CDN, Google Libraries, or Microsoft Libraries are using CDN which is extremely powerful. Because it has now become a standard, a lot of other sites are utilizing it as well, chances are that your blog user has also visited one of those other sites that are using jQuery with a CDN for scripts. So the script is already cached in your user’s browser, and the result will be makes loading of the jQuery script very fast on user’s end. In this topic theme tutorials, we will show you how to replace WordPress jQuery with CDN.

Why You Need Replace WordPress jQuery with CDN

CDN is short for Content Delivery Network which is a network of servers that deliver cached static content from websites to users based on the geographic location of the user. User’s proximity to your web server has an impact on load time. By deploying your content across multiple geographically dispersed servers, you can make your pages load faster from the user’s perspective. This is when CDN comes in handy, in simple words, the closer the CDN server is to where your user is, the faster the user gets the content. That’s it, the advantages if you are replace WordPress jQuery with CDN, then you can clearly see that having a CDN can make a huge impact on your WordPress blog.

How to Replace WordPress jQuery with CDN

Now you are probably wondering, how do I do this? Well its pretty simple, to replace WordPress jQuery with CDN first you need to edit the functions.php, and open the functions.php file of your current WordPress template, and add the following codes below.

Using jQuery’s CDN Provided by Media Temple

All jQuery releases are available on the jQuery CDN, visit jQuery’s CDN page for more information.

if (!is_admin()) add_action("wp_enqueue_scripts", "bloglow_custom_jquery_cdn", 11);
function bloglow_custom_jquery_cdn() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://code.jquery.com/jquery-1.9.1.min.js", false, null);
wp_enqueue_script('jquery');
}

Using jQuery’s CDN Provided by Google CDN Library

All jQuery releases are available on the Google CDN Library, visit Google’s CDN page for more information.

if (!is_admin()) add_action("wp_enqueue_scripts", "bloglow_custom_jquery_cdn", 11);
function bloglow_custom_jquery_cdn() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}

Using jQuery’s CDN Provided by Microsoft CDN Library

All jQuery releases are available on the Microsoft CDN Library, visit Microsoft’s CDN page for more information.

if (!is_admin()) add_action("wp_enqueue_scripts", "bloglow_custom_jquery_cdn", 11);
function bloglow_custom_jquery_cdn() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js", false, null);
wp_enqueue_script('jquery');
}

You are done with this. You now already replace WordPress jQuery with CDN, if you have any questions, or if you have other ideas on how to improve, and add more functionality to the code, be sure to leave a comment!

How to Change the Text Selection Color or Highlight Color

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, the ::selection selector is supported in Internet Explorer 9+ (IE9+), Opera, Google Chrome, and Safari. Mozilla Firefox supports an alternative, the ::-moz-selection. By default, the most selected area is highlighted with blue color. In this post we are going to explain exactly what is text selection are, and show you how to change the text selection color or highlight color. Change the text selection color or highlight color would give a new touch to your blog and these technique is extremely straightforward that it takes minutes or even seconds to complete.

What is Text Selection Color?

By definition, the ::selection selector matches the portion of an element that is selected by a user. In other words, when you select a portion of someone’s site content, you’ll see that the text is displayed as a highlight. By default, most browsers use a very light blue background color with no change to the font color. What most folks don’t know is that through CSS, you can style the font color and background color.

Change the Default Text Selection Color with CSS

Open the styles.css file of your current WordPress template and add the following codes below.

::selection { background: #ff6200; color: #fff; }
::-moz-selection { background: #ff6200; color: #fff; }

Don’t forget to change the background color and color to match your theme’s color scheme. The ::selection selector is used by Google Chrome, Safari, Internet Explorer 9+ (IE9+), and Opera. Mozilla Firefox supports an alternative, the ::-moz-selection. This is the reason why they are on two separate lines. If you have other tricks that we can add, surely let us know and we will add it in these tutorial. There may be several things that us may have missed out here, please feel free to discuss, and add your own views and suggestions.

Display WordPress Breadcrumb Navigation Without a Plugin

Breadcrumb navigation is an excellent supplementary navigation system specially for CMS because it helps in site usability. In our previous post we have how to enable breadcrumb navigation links in WordPress using a plugin, The plugin in our previous post reveals page hierarchy. It is a very good addition to the design because of usability and it also provides SEO benefits because it links to the path hence increasing bot activity in page indexing. The simple fact is that breadcrumb can be great for your site in terms of ease of navigation and can help search engine like Google to understand the relevance of your site to particular keywords. In this post I am going to explain exactly what breadcrumb navigation are, and show you how to display WordPress breadcrumb navigation without a plugin.

What Are Breadcrumb Navigation?

Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give visitors a way to understand their current location in the context of a website. The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. You’ve probably seen and used breadcrumb navigation hundreds of times before without even realizing it.

Benefits to Using Breadcrumb

There are a number of benefits to using breadcrumb on your blog, below are five number benefits to using breadcrumb navigation.

  • Usability – it gives users an intuitive means of browsing through your site.
  • Easy to backtrack – if your site is made up of many layers then breadcrumb can make navigating through them far easier.
  • Aesthetics – breadcrumb navigation are a compact and attractive navigational element.
  • Context – breadcrumb navigation instantly give a vistor an idea of how the page they have landed on relates to the rest of the blog.
  • SEO – Google will interpret your breadcrumb navigation and add them to the search engine results page.

Unfortunely, WordPress doesn’t have a default function to display a breadcrumb navigation. We’ll see how to create this navigation technique, and display it on the posts, pages, and archives.

WordPress Breadcrumb Function Code

The function code we are going to share in this tutorial, supported all types of WordPress pages.

  • Single post listed in one category.
  • Single post listed in multiple categories that are at the same level.
  • Category and sub-category archives.
  • Paged navigation.
  • Tag archive.
  • Daily archive.
  • Monthly archive.
  • Yearly archive.
  • Author archive.
  • Single post page.
  • Single page.
  • Attachment page.
  • Search results.
  • 404 error page.

And to add breadcrumb navigation you need to edit functions.php, header.php, style.css. First open the functions.php file of your current WordPress template and add the following codes below.

function bloglow_get_breadcrumb_navigation() {
$delimiter = '»';
$home = get_bloginfo('name');
$before = '<span>';
$after = '</span>';
echo '<div id="breadcrumb"><!-- Bloglow breadcrumb navigation without a plugin v1.0 - http://bloglow.com/plugins/display-wordpress-breadcrumb-navigation-without-a-plugin/ -->';
global $post;
$homeLink = get_bloginfo('url');
echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';
if ( is_category() ) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
echo $before . 'Archive by category "' . single_cat_title('', false) . '"' . $after;
} elseif ( is_day() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
echo $before . 'Archive by date "' . get_the_time('d') . '"' . $after;
} elseif ( is_month() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo $before . 'Archive by month "' . get_the_time('F') . '"' . $after;
} elseif ( is_year() ) {
echo $before . 'Archive by year "' . 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;
echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a>' . $delimiter . ' ';
echo $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
echo ' ' . get_category_parents($cat, TRUE, ' ' . $delimiter . ' ') . ' ';
echo $before . 'You&apos;re currently reading "' . 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_id  = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id    = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo ' ' . $crumb . ' ' . $delimiter . ' ';
echo $before . 'You&apos;re currently viewing "' . get_the_title() . '"' . $after;
} elseif ( is_page() && !$post->post_parent ) {
echo $before . 'You&apos;re currently reading "' . get_the_title() . '"' . $after;
} elseif ( is_page() && $post->post_parent ) {
$parent_id  = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id    = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo ' ' . $crumb . ' ' . $delimiter . ' ';
echo $before . 'You&apos;re currently reading "' . get_the_title() . '"' . $after;
} elseif ( is_search() ) {
echo $before . 'Search results for "' . get_search_query() . '"' . $after;
} elseif ( is_tag() ) {
echo $before . 'Archive by tag "' . single_tag_title('', false) . '"' . $after;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . 'Articles posted by "' . $userdata->display_name . '"' . $after;
} elseif ( is_404() ) {
echo $before . 'You got it "' . 'Error 404 not Found' . '"&nbsp;' . $after;
}
if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo ('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}
echo '</div><!-- / Bloglow breadcrumb navigation without a plugin -->';
}

After adding the above function code in your functions.php file, copy and paste the code below in the header.php file located in your theme’s folder. Place the following code where you want the breadcrumb trail to appear. The easiest way is to place the above code in your theme’s header.php file. If you decide otherwise, then you need to place it in multiple files like single.php, archive.php, search.php, page.php, or custom-page-template.php, and probably in other files depending on your theme.

<?php bloglow_get_breadcrumb_navigation(); ?>

All that remains to do for now, is to design your breadcrumbs with CSS. You can use #breadcrumb for styling breadcrumbs block and #breadcrumbHome for styling a home icon crumb.

Styling the Breadcrumb Navigation

Finally you need to style the breadcrumb trail with CSS. The following code should be added to your theme’s CSS file or in other CSS files depending on your theme.

#breadcrumb {
background: url(../../images/icons/breadcrumb-home-icon.png) no-repeat left center;
font-weight: bold;
margin: 14px auto -29px;
text-shadow: 1px 1px 0 #fff;
width: 960px;
}
#breadcrumbHome {
padding: 0 0 0 22px;
}

You now have the breadcrumb navigation code that can be used on any WordPress blog. If you have any questions, or if you have other ideas on how to improve and add more functionality to the code, be sure to leave a comment!

How to Enable Breadcrumb Navigation Links in WordPress

Breadcrumb navigation is an excellent supplementary navigation system specially for CMS because it helps in site usability. The plugin we are going to share in this article reveals page hierarchy. It is a very good addition to the design because of usability and it also provides SEO benefits because it links to the path hence increasing bot activity in page indexing. The simple fact is that breadcrumb can be great for your site in terms of ease of navigation and can help search engine like Google to understand the relevance of your site to particular keywords. In this post I am going to explain exactly what breadcrumb navigation are and show you how to enable them on your site with the best breadcrumb plugin available for WordPress.

What Are Breadcrumb Navigation?

Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give visitors a way to understand their current location in the context of a website. The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. You’ve probably seen and used breadcrumb navigation hundreds of times before without even realizing it.

Benefits to Using Breadcrumb

There are a number of benefits to using breadcrumb on your blog, below are five number benefits to using breadcrumb navigation.

  • Usability – it gives users an intuitive means of browsing through your site.
  • Easy to backtrack – if your site is made up of many layers then breadcrumb can make navigating through them far easier.
  • Aesthetics – breadcrumb are a compact and attractive navigational element.
  • Context – breadcrumb instantly give a vistor an idea of how the page they have landed on relates to the rest of the blog.
  • SEO – Google will interpret your breadcrumb and add them to the search engine results page.

Unfortunely, WordPress doesn’t have a default function to display a breadcrumb navigation. We’ll see how to create this navigation technique, and display it on the posts, pages, and archives.

Install a Breadcrumb Plugin

In order to include dynamic breadcrumb navigation on all relevant pages on your blog, first you need to install Breadcrumb NavXT plugin. In your WordPress dashboard find the Admin Menu, then click the Plugins, and Add New. Then search Breadcrumb NavXT.

Install the Breadcrumb Code

Open the appropriate file for your theme typically header.php. This can be done within WordPress administration panel through Appearance > Editor and place the following code where you want the breadcrumb trail to appear.

<div class="breadcrumbs">
<?php if(function_exists('bcn_display')) {
bcn_display();
} ?>
</div>

Next, click the Update File. Now you should have a breadcrumb trail on your WordPress blog. To customize the breadcrumb trail you may edit the default values for the options in the administrative interface. This is located in your WordPress administration panel under Settings > Breadcrumb NavXT.

Now with this plugin installed on your WordPress blog. It will help you readers, looks good on the page, boosts your SEO prospects and much more. We hope that you find our tutorial helpful and easy to understand. If you have any questions regarding it, feel free to leave a comment.

Redirect the Attention of Your User’s with Comment Redirect

One of the best strategies develop your relationship with the first time visitors and make them a loyal reader of your blog is to redirect them to a specific page. This page can contain anything else, most bloggers tend to use pop-up ads or send emails to their users, but those methods are not very well liked. WordPress introduces a plugin called Comment Redirect, which can redirect your user’s attention. This plugin redirect your first time commentators to a WordPress page of your choice. This is an excellent plugin to use if you want to thank your first time commentators. You can send them to a page where you have written some kind words for them. Besides, you can also send them to any of your specific page that you want to attract your visitors. You can introduce them to your blog a bit more, ask them to subscribe to your blog, share about new products, new books, special note, etc. This can become a great way to building your community. The limit is your imagination with this plugin’s use, because you can literally have any type of organization in the redirected page. Try your best and get creative. To use this plugin, you must create a page. Then download the plugin and activate it. Use the settings to select which page you want the users to redirect to. In this tutorial, we’ll show you how to redirect the attention of your user’s with comment redirect plugin.

Create a Page for Comment Redirect

Create a page that you want to redirect the first commentators. In your WordPress dashboard find the Admin Menu, then click the Pages, and Add New. Make sure your page include all of the elements that your needs to let them join your community like email subscribes, contact, Twitter profile, Facebook profile, Google Plus profile, etc.

Install a Comment Redirect

In your WordPress dashboard find the Admin Menu, then click the Plugins, and Add New. Then search Comment Redirect. Now install the plugin and activate it.

Configuration the Comment Redirect

After activating the plugin it will be appeared in the plugin’s sidebar. Click on that and put the link to your page, or other page that you want to redirect in it.

Now with this plugin you can redirect first time commentators to a WordPress page of your choice to building your community or anything else that you want. We hope that you find our tutorial helpful and easy to understand. If you have any questions regarding it, feel free to leave a comment.