Archive for 2015

What is Google’s Material Design?

21:07:00 0 Comments A+ a-


Material Design
Material design is a concept of visual language developed by google. It's include 3D dimension of object, soft shadow form all angles and define the layer position in the design by shadow.

Google has just revealed a new design language for Android, Chrome OS, and the web. The new look — which was first previewed in a Google+ app update last month — includes splashes of color, refreshed iconography, typography, and a more consistent interface hierarchy.

You can get a little taste of Material Design for yourself over at Google's Polymer Project, where one of the web apps Duarte demoed on stage is live for anyone with a Chrome browser to explore.

Top Must Have WordPress Plugins for All New Website Owners

11:11:00 3 Comments A+ a-



Are you a new blog/website owner? And are you looking to spice up your WordPress website? Then there is some best plugins for you. These help you to make your website more popular in search.

1) All in one Webmaster

If you are a webmaster you probably heard of Google Webmaster Tool. Bing has it’s own versions called Bing Webmaster Central. With them you can check how your site is indexed (Webmaster Tool), get detailed statistics (Analytics Tool), earn money (Google AdSense) and more.

This WordPress Plugin allows you to easily integrate them with your blog. It has option to add Google, Bing, Alexa, Blog Catalog, Yahoo’s Webmaster and Analytics code (meat tags). Single click sitemap submission to Google, Bing, Yahoo and Ask. In addition to that it has option to add tracking code for Clicky, Quantcast, Compete.com analytics!! Site-Verification-Option, Google XML sitemap submission and much more. Grab your copy.

If you change your WordPress theme, you don’t have to add all meta tags again to your theme. Plugin will add metadata or required scripts to all Posts and Pages automatically.

All in One Webmaster Premium - screenshot-2

2) WP Super Cache

This plugin is great for one reason. It makes your pages load way faster. It generates static html files from your dynamic WordPress blog. After a html file is generated your WebServer will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. Grab your copy.

WP Super Cache Caching

3) Akismet

Akismet checks your comments against the Akismet Web service to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen. Grab your copy.

Akismet - Stop SPAM on your WordPress blog

4) WordPrese SEO ( Yoast SEO )

No doubt this is the best WordPress SEO Plugin right now. I use it here on Crunchify.com. So many eye catching features like:

XML Sitemap
Home Page / Posts / Pages title slug
Breadcrumb
Social Media integration
Robots.txt and .htaccess file modification
And lot more
Grab your copy.

Top Newsletter and Mailing List WordPress Plugins

10:38:00 0 Comments A+ a-


One of the main requests you get as a developer from clients is to have a mailing list options on their website. There are many options to create a mailing list.
you can let subscribers sign for a mail every time a post is published Subscribe2 does, provides a comprehensive subscription management and email notification system for WordPress blogs that sends email notifications to a list of subscribers when you publish new content to your blog.
1) MailChimp WordPress Plugin
Link: http://wordpress.org/extend/plugins/mailchimp/
The MailChimp plugin allows you to quickly and easily add a signup form for your MailChimp list as a widget on your WordPress 2.8 or higher site.
This plug-in lets you collect subscribers on your blog with a single or double opt-in subscription process. Double opt-in means the user has to confirm a subscription following simple standard instructions sent to him via email.
This plugin is a simple newsletter plugin. It can show opt-in form, save opt-in email and name, and send emails to your opt-in list. It also have import and export email data ability.
MailChimp is my favorite one. What is yours?
Have anything to add to this article? Please chime in and join the conversion.

How to display recent posts in wordpress?

10:12:00 0 Comments A+ a-

Many time we need to display our recent posts. Like if you want to display recent posts at your home page or in sidebar. Any were in you website you can show latest posts with this code. This code only show 7posts in your target area. But if you want to show more or lesser then seven post then you can edit this code like showposts=7 you have to change only numerical value according to requirement. Here is the code you need to display the most recent 7 posts
Recently updated posts widget you can also use for this click below link:- https://wordpress.org/plugins/recently-updated-posts-widget Display Recently Updated Posts/Pages Sometimes we need to show most recently updated Posts/Pages in WordPress Theme. Below simple function will help you on the same. 

 get_results
("SELECT ID, post_title FROM $wpdb->posts 
WHERE post_status = 'publish' AND post_modified_gmt 
< '$today' ORDER BY post_modified_gmt DESC LIMIT $howMany")):
?>



    
post_title == '') 
$post->post_title = sprintf(__('Post #%s'), $post->ID);
echo "
  • ";
the_title();
echo '
    • ';
}
?>

How to Add a Favicon to Your WordPress website or blog?

11:50:00 0 Comments A+ a-

Favicon is the small icon image that appear to your website title in the browser. It helps your users identify your website and more frequent visitors of your site will build an instant recognition for that image. 

A favicon is typically a graphic 16 x 16 pixels square and is saved as favicon.ico in the root directory of your server. You can use a favicon with any WordPress blog on a web server that allows access to the root directories.

How to create Favicon

A favicon is a simple square image. Ideally, it can be 32×32 pixels or a 16×16 pixels image. Open Photoshop or another image editor and create a square image of 128×128 pixels so that you can easily work on the image. Once you have created the image you can resize it into a 32×32 pixels and save it as a PNG file.
Even though most modern browsers will display a favicon in PNG format, older versions of Internet Explorer will not. To make sure that your favicon is displayed in most browsers and devices it is recommended that you convert it to a 16×16 pixels .ico file. To convert a PNG file into .ico you can use Dynamic Drive’s favicon genrator

Install a Favicon in wordpress


  1. Go to your WordPress Administration Panel.
  2. Click on Appearance.
  3. Click on Theme Editor.
  4. Select the file called Header or header.php to edit the file.
  5. Search for the line of code that begins with <link rel="shortcut icon" and ends with /favicon.ico" />. Overwrite it, if it exists, or add the following code below the <head> HTML tag.
  6. Save the changes.
You have done Enjoy!

How to add custom menu in wordpress nav-menu?

11:23:00 1 Comments A+ a-

When we going to use over own template in wordpress. The most important part of template to make dynamic our custom menu with wordpress default menu with php code. you have just follow some simple steps .

Step 1:- Create your menu css according to wordpress menu css. Its not so difficult dear. Its very easy to do .
You just give a class under UL tag.
 because in wordpress all <li></li> css is based on this class only. So create you menu css with the style like that-
Step 2:- After the css of your menu according to WP. Replace your ul with wordpress class.
like :- 

After code : 
  'primary', 'menu_class' => 
'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
Before edit
  'primary', 'menu_class' => 
'menu', 'menu_id' => 'primary-menu' ) ); ?>
In about code we just have to replace our class under ul named menu in the palce of nav-menu.

You have done enjoy.




How to Create Tabs in the Sidebar of WordPress Blog?

10:51:00 0 Comments A+ a-

These days if you look at any premium theme you can see tabs feature in the sidebar. These special Tabber contains tabs, which are a way to put in and display more content in less space. These tabs are used in sidebars and also in the header part for providing easy navigation. It can have wide variety of content like recent posts, comments, archives, tags etc. When you click on any tab, only the content under that particular tab gets highlighted and the rest of the tabs’ content stays hidden.

 To create tabs in your sidebar you will need any Tabber plugin. This will be good if your theme is widget ready. But the best way I recommend is DomTabs. You can download them file here : Domtabs. This domtabs is one of the best way to create your own Tabs. Here is the procedure to make your own tabbed sidebar.. - See more at: http://pcsplace.com/blog-tips/how-to-create-tabs-in-the-sidebar-of-wordpress-blog/#sthash.96n0dvHt.dpuf


more information please visit this link : http://pcsplace.com/blog-tips/how-to-create-tabs-in-the-sidebar-of-wordpress-blog/

How to make clone post and pages?

09:34:00 0 Comments A+ a-

How to make duplicate of your post ?, How to make copy of a post or page ?

When we need to make multiple pages or post with same design. Then we not need to make every pages or post . You can just install a plugin for make duplicate post or page. Its very easy to use and help you to do your work faster.
  
Download plugin form below link:

https://wordpress.org/plugins/duplicate-post/  

How To Add Gravatars For The Post Author in WordPress

11:10:00 1 Comments A+ a-

If you like to add gravatars for the post author then its very simple to do because wordpress has already give this feature.
How about adding them to your post titles to highlight the comment author? Within the loop?
Here’s the code:

get_the_author_email outputs the post author’s email and the “80” is the size of the avatar image in pixels (you can change that). How this will look depends on how you use it; where you put it in the theme (it has to be in the loop!) and how you style it.

referenced form http://themeshaper.com/2008/04/26/how-to-add-gravatars-for-the-post-author-in-wordpress/

WordPress Hack: Opening Links in New Windows

10:57:00 0 Comments A+ a-

Do you like to open every link of your website in different page or _blank page ?
If yes then you just have make some litter changes in your admin file

Step 1 - Wp-admin > quicktags.js 

Step 2

if (!edCheckOpenTags(i)) {
var URL = prompt('Enter the URL' ,defaultValue);
if (URL) {
edButtons[i].tagStart = '<a href="' + URL + '">';
edInsertTag(myField, i);
}
}
Step 3. Replace it with:

if (!edCheckOpenTags(i)) {
var URL = prompt('Enter the URL' ,defaultValue);
if (URL) {
edButtons[i].tagStart = '<a href="' + URL + '"';
if (URL!='http://')
{
var defaultTarget = prompt('Enter the Target' ,'_blank');
if (defaultTarget) edButtons[i].tagStart += ' target="' + defaultTarget + '"';
} edButtons[i].tagStart +='>';
edInsertTag(myField, i);
}
}
 

Create a Free Email Newsletter Service using WordPress

10:39:00 0 Comments A+ a-

As you see now, more and more bloggers are adding weekly email newsletter service on their blog. A lot of their audience subscribe to the weekly newsletter because it summarizes the week worth of activities on the blog, and it has exclusive tips just for the subscribers. There are many email newsletter solutions like Aweber, one of the most recommended one, but they all charge money. The solution we are going to mention in here by no means can compare to the features provided by the premium service like Aweber, and it must not be considered as the better system. Our solution is rather to give bloggers an affordable and functional method to create newsletter by using the open source software that we all love, WordPress.
In this tutorial, we will be using WordPress and Feedburner with a few plugins to create a simple Email Newsletter Service for your WordPress blog. You can track the performance of your newsletter by checking how many subscribers you have, how many clicks each link gets and much more.
Note: The codes referenced in this article will vary across themes because each designer has their own style of coding. So look for something similar or along the line of that code. This is by no means an advanced tutorial, but HTML and CSS Knowledge is recommended.
Referenced form http://www.wpbeginner.com/wp-tutorials/create-a-free-email-newsletter-service-using-wordpress/

For more information   Click here

How to add different header for every page

10:12:00 0 Comments A+ a-

Many time we want to make a different type of header for inner pages . Which is totally different to the home page header. Some time we want to add banner image for every inner page of out website.
Its very simple to do.
 There is two way to do this job. First with wordpress page. Second is with simple php page.

Without PHP method

 Step1 - Firstly copy your theme header.php file and paste with the same location with different   name. Like i want to make a different header for About page. Then you just make a copy of header.php and rename it with the name header-about.php. Its compulsory to make your header name with same format with ( - ) this sign.

 exm-
           header-contact.php.

  Step2 - Open your page where you want to show your header and paste the code given below.

You just have to put the title after ( - ) this sign. Like if my page name is services then just replace the word about into services 
With PHP

Its so simple then first way of changing header. In this way you just give a condition according to your page title.

Paste this code in your header.php file. you can use slug name of the page also in place of page title.

How to speed up your wordpress website?

12:40:00 0 Comments A+ a-

15 Easy Ways To Speed Up WordPress

 Every body want to speed up their website . Its very simple to make your website with some tips and tricks. Like you can manage your content well or can add some use full plugin for your back end data like with save your cashe etc.

When a person lands on your site for the first time, you only have a few seconds to capture their attention to convince them to hang around.

For farther information http://www.sparringmind.com/speed-up-wordpress/

How To Avoid Duplicate Posts

23:34:00 0 Comments A+ a-

Duplicated contents are pretty bad and they somehow affects how search engine weights your site. Here’s how you can avoid getting duplicated contents on your blog.

Click here to reference 


How to Add a Contact Form to WordPress

11:38:00 3 Comments A+ a-

Its very important part of a website. It’s important to provide options for people to contact you from your web site.

Well, the long tail “how to add a contact form to wordpress” jumped out at me. It’s a safe assumption that if one person wants to know how to do something, many others do as well. It is of the same level of safety for the assumption that if Google “suggests” a phrase in auto-complete, people have searched for it in the past.


Therefore, I present this tutorial to you.

Using a Template File or a Plugin for a WordPress Contact Form

I am a fan of using plugins for WordPress functionality, and of leaving the aesthetics to a theme. However, your theme may already have a contact form Template attached to it. If so, you can just create a new page and change the Template to “contact” or something similar and voila you have a contact form.

For this tutorial I will be using the Contact Form 7 plugin. It is available at contactform7.com or in the WordPress.org plugin repository.

To add it you go to the add new plugin screen, do a search for “contact form 7″ then get it downloaded, installed and activated like you would any other plugin.

From there you will create the form. In this tutorial we will just give the form a name and then use all the defaults. This however only scratches the surface of what Contact Form 7 is capable of. I encourage you to explore the possibilities if you need more complex forms.

Creating a Contact Form for WordPress Using the Contact Form 7 Plugin

Once the plugin is installed and activated, follow the steps below to create a contact form.

1.      In the left hand menu, click Contact >> Add New.

2.      Click the Add New button. This extra step is there to allow you to change the language of your contact form if need be.

3.      Give it a title and click the Save button.

This will create a contact form that sends email to your admin email address. It will also use the main fields: name, email, subject, and message for the form. You can add extra stuff in there but we won’t in this tutorial. We are creating just a basic contact form here.

Adding the Contact Form 7 Shortcode to a WordPress Page

The form that we created in the previous steps will have generated a shortcode. To get it, follow the steps below.

1.      In the left hand menu, click Contact >> Contact Forms.

2.      You will see the shortcode next to the form that you created. Right-click it and click copy.

Now you just need to paste the shortcode into a new page. Simply go to Pages>> Add New, give the page a name, then paste in the shortcode into the body area. Then Publish the page, view it, fill out the form and test it out.

You should get an email post haste.

From here you can add the Contact Page to the WordPress menu if it isn’t displayed by default on your site.

Using a WordPress Page as Your Home Page

11:27:00 1 Comments A+ a-

IF you like to use any custom page as your home page then the first step is to create a page to serve as your new home page. For the purpose of this example, we’ll call it “My New Home Page.”

1.   In your WP control panel, select the Pages tab.
2.   Click on Add New.
3.   Give the page a title – something like, “HOMEPAGE”
4.   Create the content for your home page just as you would a blog post.
5.   Click the Publish button.
While you’re still in the Write Page subpanel, create a second page:
1.   Title this one “RECENT POSTS” (or whatever you want to call the page that your recent posts appear on).
2.   You don’t need to have any Page Content for this one.
3.   Click the Publish button.
Now you’re ready tell WP to use your new page as the home page:
1.   In the Settings panel on the left navigation select Reading.
2.   At the top of the Reading Options subpanel you’ll see:

How To Set Page As Homepage In WordPress - Step 1

3.   To change the front page to your new home page, select “A static page” for Front page displays.
4.   Select “HOMEPAGE” from the Front page drop down menu.
5.   Finally, be sure to tell WP which page to use to display your recent posts. From the Posts page menu select the “Recent Posts” page you created earlier. As you can see in the picture below, our posts page has not been set yet.

How To Set Page As Homepage In WordPress - Step 2

6.   Click Save Changes.
View your site. “HOMEPAGE” should now be your home page. You also do not need to put the title in all caps. This was simply done for our example.

How to use a child theme in wordpress

10:32:00 2 Comments A+ a-

Creating a child theme when you are going to edit in code of any theme’s code can save you a lot of future headache. Child themes allow you to make changes without affecting the original theme’s code. which makes it easy to update your parent theme without removing  your changes. By creating a child theme, you can easly update your parents theme without affecting the original theme at all. Not only does this make updating easier, it also makes sure that you will never ruin your original theme as you are never actually modifying the files. You can always turn off your child theme and fall back on the original.

Lets Started

In this example, we will be creating a child theme for our Demo1 theme. First things first, we need to create a new folder for your child theme. Naming it something like /deml-child/ is conventional. Within your new theme folder, create a file called style.css and fill in the information as outlined below. The theme Name, URI, Description and Author are totally up to you. 

 /*
 Theme Name:     Demo Child Theme

 Theme URI:      http://www.designerwaves.com/demo/
 Description:    Demo Child Theme

 Author:         designerwaves
 Author URI:     http://www.Designerwaves.com

 Template:       Demo
 Version:        1.0.0

*/


@import url("../Demo/style.css");
After you have created your child theme folder and style.css file, you can upload and activate your new child theme. Uploading and activating a child .

 Appearances > Themes page in your WordPress Dashboard and activate it. Before



Modifying Your Theme’s CSS

We have now created our Demo child theme. All content of my theme will be same after importing all relative files. To modify your theme’s CSS, you can add any changes to your child theme’s CSS file below the @import line. All new CSS information is added after the original theme’s CSS is loaded. Because our new CSS is located below the original’s in the file, all new CSS styles will overwrite the original’s.

Editing file.php of theme

If you want to make change in any .php file like function.php, page.php, single.php etc.
Then its very simple to do, you just create a file with same name which you like to customise in  child theme folder.
For example if i like to make any change in function.php
Step1 :- make a new function.php file in demo-child theme folder
Step2 :-  Now write your code here
In this same way you can edit nay other files also like style.css, css/responsive.css
Your path related to your file were you want to edit will be same like
/wp-content/demotheme/css/custom.css
/wp-content/demo-child/css/custom.css
Its very simple to edit with child theme and its completely safe to update your parents theme in future.
If you not like to do all these things then also not any problem you can use a simple plugin for it.

Additional Child Theme Resources


1. The One Click Child Theme Plugin – If you are having difficulty wrapping your head around the creation of the child theme folder, then this plugin will create one for you with the click of a button! 



Difference between CSS display inline, inline-block, and block

11:30:00 0 Comments A+ a-

All element on web showing as rectangular box. The display property for that how the rectangular box behaves.

display: inline;        /* Default of all elements, unless UA stylesheet overrides */



  display: inline-block;  /* Characteristics of block, but sits on a line */


  display: block;         /* UA stylesheet makes things like 
 and 
 block */


  display: run-in;        /* Not particularly well supported or common */ 

 display: none;          /* Hide
 inline
An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically. 
see in example:
 inline-block
inline-block element is similar to inline both are showing in same line or with flow of text.but in  inline block we can set width and height of element it will not override  other text of any line. It make a block in perticular line with its width and height.

block
 When we use display: block, the element will take up as much space as possible with it width spanning the entire width of its parent element as in here


How to make popular your blog with WordPress SEO

01:22:00 1 Comments A+ a-

In this article we learn how to improve the SEO of your WordPress blog.

How to SEO WordPress

 

1.Permalinks

In wordpress we can set the way you want them to look. You can set your page or post title instant of post or page id. To set this you can go to
Settings -> Permalinks

 
You can choose the Custom Structure option and enter /%postname%/ for example. This will make your links look like http://yourdomain.com/the-name-of-your-post/. Or you can enter /%category%/%postname%/ if you want to include the name of your category in the URL. You can also add custom text or other WordPress variables. 

 

2.Optimize your meta desciptions.

You should add meta description for every page.  The search engines will check how relevant your description is to the actual content of your page so  make sure that you describe only the current page and avoid adding irrelevant information in this description.

You can add description and key words in post category.  Once you go to the Posts -> Categories page in your admin area, note the description field available for each category.

 

3. Optimize your Image.

It is essential to have the "title" and "alt" tags specified for each one of the images you use in your posts. The search engines will then know what this image is supposed to represent. Typing the title and alt tags for each image you use, however, can be a time-consuming task. Instead, you can use the handy SEO Friendly Images plugin. For more information on how to install this plugin, you can check our tutorial on How to install WordPress plugins.


 


3. Headings to optimize your WordPress blog.

To make your blog SEO friendly you should give your heading in heading tag like <h1></h1>.
exm. h1, h2 ,h3, h4, h5,  h6.
because headings make it easier to determine the subject of the page.

WordPress Shortcodes

00:16:00 0 Comments A+ a-

The usage is pretty simple. Let’s say we want to show the most recent posts in a given post. We could use something like this:

[recent-posts]

For show limited post we could set the number of posts to display by setting a parameter:

[recent-posts posts="5"]

How to show Multiple post in wordpress on single page?

18:29:00 0 Comments A+ a-

In wordpress you can show your post many way. All are depend on your needs and website requirement like many time you want to show only one post and many time you want to multiple post in a page. we are already discussed about that how can we show single post in our website.

Now we learn how we show multiple post in sinlge page.

You have just put this code to your php page given below


Now all posts are showing on your page.


====================================================


but if you want to show limited post on your page then you will edit your code like this
$query = new WP_Query( array('posts_per_page'=> '5') ); 

 

 if ( $query->have_posts() ) : 
       while ( $query->have_posts() ) : $query->the_post();
             get_template_part( 'content', get_post_format() ); 
       endwhile; 
  endif;

  
$query = new WP_Query( array('posts_per_page'=> '5') ); 
 
 if ( $query->have_posts() ) : 
       while ( $query->have_posts() ) : $query->the_post();
             get_template_part( 'content', get_post_format() ); 
       endwhile; 
  endif;
 
==================================================

and if you want to show post of any single category then you can edit your code like this


$query = new WP_Query( array('category_name'=>'news',  
                             'posts_per_page'=> '5') ); 
  if ( $query->have_posts() ) : 
       while ( $query->have_posts() ) : $query->the_post();
             get_template_part( 'content', get_post_format() ); 
       endwhile; 
  endif;


in above code i have just add category name which is news


For more information about WordPress learn my blog continuously ..... thanks


How to show single post content in wordpress

18:28:00 0 Comments A+ a-



If you want to show single post content anywhere in your website and if you want to show any part of your post like
  1. Title
  2. Subtitle
  3. Content 
  4. Feature image etc.
you just have copy and paste below code
P=THE ID OF YOUR POST!
Then the whole content of the post will be shown there.

How to change wordpress theme name

18:28:00 0 Comments A+ a-


When you work on wordpress you will found many themes by default. which is provided by the wordpress to you at the time of installation of wordpress.
like

  1. twentytwelve
  2. twentythirteen
  3. twentyfourteen
But you can also use your custom name instant of these names .
For make your own custom theme you have just follow some steps and you will do it easily.



step1- go to wp-content\themes

you will find some folder like this
then change the name of your folder as you want.

In below screenshots i have change twentyfouteen folder name into mysite




Step-2  Change name in css file

                  After that open the same folder
                 open css file named style.css
    
                 mysite>style.css
 /* Theme Name: mysite 

Theme URI: the-theme's-homepage 

Description: a-brief-description 

Author: your-name Author URI: your-URI 

Template: use-this-to-define-a-parent-theme--optional 

Version: a-number--optional . General comments/License Statement if any. . */
Step3  Re-activate theme form wordpress admin

 After the change of css file name you have to reactivate your theme 

Go to    Admin dashboard > appearence > activate your theme with new name

now refresh your URL on browser your theme name has been change now.


thanks for reading ....  Enjoy


 
Subscribe to: Posts (Atom)