Snippets – Extreme Web Designs https://theextremewebdesigns.com/blog Web Design and Web Development Tue, 22 Jan 2013 01:48:15 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.5 156673191 WordPress Display Thumbnail for Post (2 Ways) https://theextremewebdesigns.com/blog/wordpress-display-thumbnail-for-post-2-ways/ https://theextremewebdesigns.com/blog/wordpress-display-thumbnail-for-post-2-ways/#respond Tue, 22 Jan 2013 01:48:15 +0000 https://theextremewebdesigns.com/blog/?p=98 Did you ever want to make WordPress display Thumbnail for post but did not know how to do it? I am going to discuss 2 ways to do this. Just copy this snippet into your theme, wherever you want to display the thumbnail and that should do it.

Method 1:

if (has_post_thumbnail())
{
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail_name');
// This gives the thumbnail url
echo $thumb[0];
}

Method 2:

<?php
if(has_post_thumbnail())
{
the_post_thumbnail();
}
?>

Do you know of any better method or a new method to display thumbnail for a post in WordPress? If yes, please share it with us in your comment below.

]]> https://theextremewebdesigns.com/blog/wordpress-display-thumbnail-for-post-2-ways/feed/ 0 98 WordPress: Get all Categories of a post (both parent and children/sub categories) https://theextremewebdesigns.com/blog/wordpress-get-all-categories-of-a-post/ https://theextremewebdesigns.com/blog/wordpress-get-all-categories-of-a-post/#respond Sat, 19 Jan 2013 13:47:16 +0000 https://theextremewebdesigns.com/blog/?p=112 Have you ever wondered how to retrieve or get all categories of a post?  This little snippet will help you make WordPress get all Categories of a post (both parent and children/sub categories).

WordPress: Get all Categories of a post (both parent and children/sub categories)

<?php the_category(', '); ?>

Do you know of any other way to  fetch both parent and children/sub categories of a post? If yes, please share it with us in your comment below.

]]> https://theextremewebdesigns.com/blog/wordpress-get-all-categories-of-a-post/feed/ 0 112 jQuery Scroll To Top Of Page Examples https://theextremewebdesigns.com/blog/jquery-scroll-to-top-scroll-to-top-of-page-using-jquery/ https://theextremewebdesigns.com/blog/jquery-scroll-to-top-scroll-to-top-of-page-using-jquery/#respond Mon, 30 Jul 2012 14:44:32 +0000 https://theextremewebdesigns.com/blog/?p=1084 If you ever wondered how to scroll to top of page using jQuery, then here is the perfect snippet for you. In this article, I am going to share two snippets that will let you scroll to top of page and even control the speed at which the scrolling takes place, thus allowing you greater control over the whole scrolling process. Read on to find out more about these copy & use snippets!

Examples to Scroll to Top of Page using jQuery

I am going to show you how you can use jQuery to scroll to top of page very easily, by means of an example. In this example, I am assuming that I have some content as my text, that spans more than one page and a hyperlink at the bottom of the content. I want to be able to click on this hyperlink so that the page automatically scrolls to the top of the page. In order to do this, I am applying a class of “scroll” to this hyperlink and adding code to this using jQuery. So here’s how it’s done:

Example: Use jQuery to scroll to top of page and also control its speed (optional)

<html>
<head>
<title>jQuery Scroll to Top of Page Example</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>

<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>

<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>

<p><a href="#" class="scroll">Go To Top</a></p>
<script type="text/javascript" language="javascript" >

$(document).ready(function(){

	//Scroll slow
	$(".scroll").click(function() {
		$("html, body").animate({ scrollTop: 0 }, "slow");
		return false;
	});

	//Scroll fast
	$(".scroll").click(function() {
		$("html, body").animate({ scrollTop: 0 }, "fast");
		return false;
	});	

	//Scroll in 1 second - 1000 milliseconds
	$(".scroll").click(function() {
		$("html, body").animate({ scrollTop: 0 }, 1000);
		return false;
	});

	//Scroll in 5 seconds - 5000 milliseconds
	$(".scroll").click(function() {
		$("html, body").animate({ scrollTop: 0 }, 5000);
		return false;
	});

});	
</script>
</body>
</html>

Each of the code blocks is commented at it’s beginning, for your easy understanding. When you try the code above, make sure that you comment all code blocks except the one that you want to test as only the first block of code will be executed because they are all linked to the click event of the same html element.

Simple, isn’t it?

Do you know of any other ways to use jQuery to scroll to top of page? Feel free to suggest by commenting below.

]]> https://theextremewebdesigns.com/blog/jquery-scroll-to-top-scroll-to-top-of-page-using-jquery/feed/ 0 1084 Call / Include / Load Latest jQuery Version in WordPress Theme / Plugin https://theextremewebdesigns.com/blog/call-include-load-latest-jquery-version-in-wordpress-theme-plugin/ https://theextremewebdesigns.com/blog/call-include-load-latest-jquery-version-in-wordpress-theme-plugin/#comments Thu, 12 Jul 2012 10:42:40 +0000 https://theextremewebdesigns.com/blog/?p=1036 If you are wondering how to Call / Include / Load Latest jQuery Version in WordPress Theme / Plugin, then look no further! In this article, I am going to share a very simple way that use can use to always load the latest jQuery version either in your Theme or Plugin or both. Read on to find out more.

How to Call / Include / Load Latest jQuery Version in WordPress Theme / Plugin

One of the strongest reason to include latest jQuery version is to take advantage of new features that jQuery offers without having to manually change the link pointer to latest jQuery version. That said, following are the ways to load latest jQuery version in WordPress:

Load Latest jQuery Version in WordPress Theme:

Paste the following code in your theme’s function.php file:

function ewd_load_js()
{
if ( !is_admin() )
{
wp_deregister_script( 'jquery' );

wp_register_script('jquery', 'http://code.jquery.com/jquery-latest.min.js');

wp_enqueue_script('jquery');
}
}

add_action('wp_enqueue_scripts', 'ewd_load_js');

Load Latest jQuery Version in WordPress Plugin

Or if you need the latest jQuery version to be loaded in your custom plugin, then simply paste the following code in your plugin’s main file:

function ewd_load_js_plugin()
{
wp_deregister_script( 'jquery' );

wp_register_script('jquery', 'http://code.jquery.com/jquery-latest.min.js');

wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'ewd_load_js_plugin');

Load JavaScript(s) in Footer

function ewd_load_js_plugin()
{
wp_deregister_script( 'jquery' );

wp_register_script('jquery', 'http://code.jquery.com/jquery-latest.min.js', 'false', 'false', true);

wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'ewd_load_js_plugin');

So what is different in the above code? Well, if you pay close attention, we now have some new arguments appended in the wp_register_scripts function. Especially the argument “true”.  This corresponds to the $in_footer variable and it is this value that is responsible loading the scripts in footer. Here would be the actual usage of wp_register_script:

<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>

$handle – Name of the script

$src – URL to script

$deps – Array of handles of all the registered scripts that this script depends on, that is the scripts that must be loaded before this script.

$ver – String specifying the script version number, if it has one, which is concatenated to the end of the path as a query string.

$in_footer – Normally scripts are placed in the <head> section. If this parameter is true the script is placed at the bottom of the <body>. This requires the theme to have the wp_footer() hook in the appropriate place.

Your turn!

Do you know of any other ways to Call / Include / Load Latest jQuery Version in WordPress Theme / Plugin? Feel free to suggest by commenting below.

]]> https://theextremewebdesigns.com/blog/call-include-load-latest-jquery-version-in-wordpress-theme-plugin/feed/ 2 1036 WordPress: Add Content After Post Automatically https://theextremewebdesigns.com/blog/wordpress-add-content-after-post-automatically/ https://theextremewebdesigns.com/blog/wordpress-add-content-after-post-automatically/#respond Tue, 29 May 2012 15:04:56 +0000 https://theextremewebdesigns.com/blog/?p=657 WordPress Add Content After Post Automatically – If you are a WordPress theme developer, at some point of time or other, you may have wanted to add content after post automatically. Here is a neat snippet that let’s you do exactly that with just few lines of code.

WordPress Add Content After Post Automatically

The solution provided here does not require you to edit the actual theme files. Simply copy the following code in the functions.php file of your theme, write the content that you want to be shown and you are done.

function insert_custom_content($content)
{
if(!is_feed() && !is_home()) {
$content.= "<div class='custom_content'>";
$content.= "<h3>Some heading</h3>";
$content.= "<p>This is a custom content that appears at the end of every article.</p>";
$content.= "</div>";
}

return $content;
}
add_filter ('the_content', 'insert_custom_content');

Very simple, isn’t it?

That’s it!

Do you know of any other ways to add content after post automatically in WordPress? Feel free to share your suggestions by commenting below.

]]> https://theextremewebdesigns.com/blog/wordpress-add-content-after-post-automatically/feed/ 0 657 jQuery Center Div Example https://theextremewebdesigns.com/blog/jquery-center-div/ https://theextremewebdesigns.com/blog/jquery-center-div/#respond Sat, 14 Apr 2012 21:23:01 +0000 https://theextremewebdesigns.com/blog/?p=547 Love jQuery? Need a quick way to center div in window? In this article I am going to show you how to center div using jQuery.

Example to Center Div using jQuery

In order to use this, simply apply the .center() method to your element selector and that will center the div.

<style type="text/css">
#my_div {
	background-color: #DFF2FF;
	border: 1px solid #06F;
	height: 200px;
	width: 500px;
}
.my_div_2 {
	background-color: #FFCC66;
	border: 1px solid #F90;
	height: 100px;
	width: 300px;
}
</style>

<div id="my_div">This is my_div</div>
<div class="my_div_2">This is my_div_2</div>

<script type="text/javascript">
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}

//Call the "center" function on your desired div in the following way.
//Simply replace #my_div with the ID or the class of the div that you want to center.
$('#my_div').center();
$('.my_div_2').center();
</script>

When you run the above code, you will notice that the divs are centered in the window when the page loads.

That’s it!

Do you know of any other ways to use jQuery to center div? Please share your thoughts below.

]]> https://theextremewebdesigns.com/blog/jquery-center-div/feed/ 0 547 Center Div Horizontally Using CSS Example https://theextremewebdesigns.com/blog/center-div-css/ https://theextremewebdesigns.com/blog/center-div-css/#respond Tue, 10 Apr 2012 06:40:20 +0000 https://theextremewebdesigns.com/blog/?p=543 In this article, I am going to show you a very simple way to center div using css.

How to Center div using CSS:

Before I show you the markup, let’s quickly look at the output:

Center div CSS

Example: Horizontally Center div using CSS:

<style type="text/css">
#outer {
background-color: #930;
padding: 15px;
width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#inner {
color: #000;
background-color: #FFCFB9;
padding: 10px;
width: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>

HTML:

<div id="outer">

<div id="inner">
This is inner div.
</div>

</div>

Note that for the demo purposes, I have maintained the width of the outer div at 500px. You may remove/change it as you need.

That’s it!

Do you know of any other ways to Center div CSS? Feel free to share your thoughts by commenting below.

]]> https://theextremewebdesigns.com/blog/center-div-css/feed/ 0 543 Center li in ul using CSS Example https://theextremewebdesigns.com/blog/center-li-in-ul-using-css/ https://theextremewebdesigns.com/blog/center-li-in-ul-using-css/#respond Tue, 10 Apr 2012 06:04:46 +0000 https://theextremewebdesigns.com/blog/?p=532 When working with unordered lists (ul) using HTML & CSS, you might have seen that the ul li stack vertically. But you may want them to stack horizontally and better yet, align them all horizontally so that all the li center in ul. So do you know how to center list item in the unordered list using CSS? If not, don’t worry In this article, I am going to show you a very simple way to center li in ul using CSS and thereby fabulous CSS menu and center the list items inside the list using an easy example.

How to Center li in ul using CSS – Example

Before I show you the HTML and CSS required to center the list items in its parent unordered list using CSS, let’s look at the output:

Center li in ul CSS

So this example assumes that we have a div and we are using an unordered list (ul list) with some list items (li items) in it. It’s upto you to decide how many li items you want to center in it. There’s no limit as such. But for the sake of the example to center li in ul using CSS, I am going to assume that we have 6 li items.

The following is HTML markup. You may use it and change it as you need it.

<style type="text/css">#nav {
background-color: #930;
padding: 10px;
margin-left: auto;
margin-right: auto;
width: 500px;
margin-top: 50px;
}

#nav ul {
text-align: center;
padding: 0;
margin: 0;
}

#nav li {
display: inline;
list-style: none;
padding: 10px 5px 10px 5px;
}

#nav a {
color: #930;
text-decoration: none;
padding: 5px;
background-color: #FFBE9F;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
}

#nav a:hover {
background-color: #FFC9AE;
}
</style>

HTML:
<div id="nav">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Sixth link is long link</a></li>
</ul>
</div>
Your Turn!

Do you know of any other ways to center li in ul using CSS? Feel free to share your comments below.

]]> https://theextremewebdesigns.com/blog/center-li-in-ul-using-css/feed/ 0 532 jQuery Hide Show Textbox Examples https://theextremewebdesigns.com/blog/jquery-hide-show-textbox/ https://theextremewebdesigns.com/blog/jquery-hide-show-textbox/#comments Sat, 24 Mar 2012 00:51:41 +0000 https://theextremewebdesigns.com/blog/?p=389 Many times it may have happened that you wanted to use jQuery to Hide/Show text boxes when a checkbox is checked or a button is clicked. This article will show you how to use jQuery to Show / Hide Textbox when checkbox is checked.

How to Hide  Or Show Textbox using jQuery – Examples

In order to see how to show textbox or hide textbox using jQuery when checkbox is checked, lets assume that we have a textbox and few checkboxes. So here it goes:

Example: Show / Hide Textbox when checkbox is checked using jQuery

<input type="checkbox" class="hide" /><input type="text" value="Name" /><br>
<input type="checkbox" class="hide" /><input type="text" value="Email" /><br>
<input type="checkbox" class="hide" checked="checked" /><input type="text" value="Address" /><br>

<script type="text/javascript">
$(document).ready(function() {

$('.hide').click(function() {
$(this).next().toggle();
});
$('.hide:checked').next().hide();

});
</script>

This third input box is for the Address and it is hidden by default when the page loads. This is achieved by simply marking its “checked” attribute as “checked”. Just refer to the third input element’s HTML code to understand this. The corresponding jQuery code to achieve this is:

$('.hide:checked').next().hide();

Don’t forget to include your own version(preferably latest) of jQuery. Unless you have included a call to the jQuery framework, this demo will not work. Hope this helps.

Your turn!

Do you know of any other ways to use jQuery to Show / Hide textbox? Please feel free to share by commenting below.

]]> https://theextremewebdesigns.com/blog/jquery-hide-show-textbox/feed/ 1 389 How to create “Stitched” look using CSS3 https://theextremewebdesigns.com/blog/how-to-create-stitched-look-using-css3/ https://theextremewebdesigns.com/blog/how-to-create-stitched-look-using-css3/#comments Fri, 24 Feb 2012 17:00:45 +0000 https://theextremewebdesigns.com/blog/?p=338 Ever wanted to create a Stitched look using CSS only without using any graphic tools? Here’s a little snippet of code that lets you achieve exactly that.

Example to Create “Stitched” look using CSS3

Here is what we are going to create:

Stitched look CSS

<style type="text/css">
.stitched_bg {
background-color: #356A00;
padding: 5px;
width: 145px;
height: 145px;
margin-left: auto;
margin-right: auto;
}
.stitched {
border:2px dashed #ffffff;
box-shadow: 0 0 0 8px #356A00;
color: #FFF;
height: 140px;
}
</style>
<div class="stitched_bg">
<div class="stitched"></div>
</div>

That’s it! Isn’t that simple?

Your turn!

Do you know of any other ways to create stitched effecting using only CSS? If yes, please feel free to share with us by commenting below.

]]> https://theextremewebdesigns.com/blog/how-to-create-stitched-look-using-css3/feed/ 1 338