Category: Wordpress

Use the right image format

The 3 most common file formats for images on the web are .jpg, .png and .gif. Here’s a brief summary of each image format and when you should use it.

• png: Use png images if the image has text in it, or if you need a transparent background.
• gif: Use gif for very small images such as a 5*5px background tile.
• jpg: Use this format for displaying photos, illustration images, etc.

Use thumbnails instead of html resizing

HTML and CSS offers you the possibility of resizing images by specifying the desired width and height. While this is a useful feature, the image isn’t actually resized, it’s only displayed at a smaller size. You want to display a 500px width image? Then, resize your original image to 500px and display the resized version instead of the original.

If you’re using WordPress, the upload tool automatically resizes any uploaded image to various sizes (original, medium, thumb, etc) so you should always choose the appropriate size.

On php-based websites, there’s many different libraries that allow you to easily generate thumbnails on the fly. ImageMagick is one of the most popular.

Use CSS3 effects instead of images

Need a gradient or a fancy text effect on your website? Don’t use images! The CSS3 specification allows you to add lots of visual effects. One of my rules of thumb when it comes to web design and development is to avoid using images as much as possible.

In other words, if you can do something using CSS, do it with CSS, not images. There’s tons of things that you can do with CSS3 instead of using images, and your website will be faster.

Use web fonts instead of encoding text in images

In late 2015, I still see lots of people encoding text in images. This is definitely bad. In 90% of case, you can instead use a webfont and CSS. Webfonts are faster to load than a whole bunch of encoded text images.

Using webfonts is super easy. In order to ensure a good cross-browser compatibility, you need to have the font you wish to use in the following formats: .ttf, .woff, .svg and .eot. If you only have one of those file formats, there’s a super useful online tool to help, the Fontsquirrel webfont generator.

Drop your fonts somewhere on your web server, then add the following on your .css file:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); 
       url('tagesschrift.woff') format('woff'),   
       url('tagesschrift.ttf') format('truetype'),
       url('tagesschrift.svg#font') format('svg');
}

Once done, you assign the webfont to an element using the font-family property:

p {
    font-family: "Tagesschrift", Georgia, Serif;
}

Make use of Photoshop’s “save for web” tool

When it comes to web design, Photoshop is by far the most popular program, and most of you are probably using it. Despite its popularity, a lot of users never use the “Save for web” feature. It’s a shame, because this function allows Photoshop to provide the user presets to save a image in order for it to be displayed on a website.
Basically, if you’re intending to display and image on your website, use Photoshop’s “Save for web” function. Always.

If you don’t have Photoshop, don’t worry. You can use Optimizilla, an online image optimizer. Prefer using an app? Then I recommend RIOT.

Using WordPress? Install the WP Smush plugin

If you’re using WordPress, you can save a lot of time by simply installing a plugin that optimize your images. I’ve been using WP Smush. It works like a charm: install the plugin, then upload your images normally. WP Smush takes each image you’re uploading and optimizing its size with no compromise on the quality. Results are impressive: images can be reduced up to 80% in size.

There’s also a “pro” version of the plugin, called WP Smush Pro. I haven’t tried it yet but the extra features are very appealing: optimization of images up to 32mb (WP Smush is limited to 1mb), bulk optimization of all your images with one click, even better compression, and so on. If you’re interested in the “pro” version of WP Smush, click here to visit CWC’s “deals & coupons” page and get a 50% discount.

Use caching techniques to display your images faster

Although this isn’t really an image optimization technique itself, caching your images is an overall good practice and will display your images faster to your returning visitors.

Here’s a ready-to-use code snippet that will cache various filetypes (images, and also other kind of documents like pdf or flv). This code has to be pasted in your website .htaccess file. Make sure you have a backup of it before applying this technique, just in case something goes wrong.

# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>

This code has to be pasted into your theme’s functions.php file. It can be customized to deal with custom post types, as shown on line 16 and after.

add_filter( 'default_content', 'pu_default_editor_content' );

function pu_default_editor_content( $content ) {
    global $post_type;

    switch( $post_type ) 
    {
        case 'post':
            $content = 'Default content for blog posts.';
        break;

        case 'page':
            $content = 'Default content for pages.';
        break;

        case 'portfolio':
            $content = 'Default content for your portfolio pages.';
        break;

        case 'products':
            $content = 'Default content for blog posts.';
        break;
    }

    return $content;
}

Credit: Paulund

The post How to pre-populate WordPress editor with default content appeared first on WPRecipes.

This code has to be pasted into your theme’s functions.php file. It can be customized to deal with custom post types, as shown on line 16 and after.

add_filter( 'default_content', 'pu_default_editor_content' );

function pu_default_editor_content( $content ) {
    global $post_type;

    switch( $post_type ) 
    {
        case 'post':
            $content = 'Default content for blog posts.';
        break;

        case 'page':
            $content = 'Default content for pages.';
        break;

        case 'portfolio':
            $content = 'Default content for your portfolio pages.';
        break;

        case 'products':
            $content = 'Default content for blog posts.';
        break;
    }

    return $content;
}

Credit: Paulund

This code has to be pasted into your theme’s functions.php file. It can be customized to deal with custom post types, as shown on line 16 and after.

add_filter( 'default_content', 'pu_default_editor_content' );

function pu_default_editor_content( $content ) {
    global $post_type;

    switch( $post_type ) 
    {
        case 'post':
            $content = 'Default content for blog posts.';
        break;

        case 'page':
            $content = 'Default content for pages.';
        break;

        case 'portfolio':
            $content = 'Default content for your portfolio pages.';
        break;

        case 'products':
            $content = 'Default content for blog posts.';
        break;
    }

    return $content;
}

Credit: Paulund

The post How to pre-populate WordPress editor with default content appeared first on WPRecipes.

First, place the code below into your theme’s functions.php file and don’t forget to save.

function wpb_user_registration_date($atts, $content = null ) { 
	$userlogin = shortcode_atts( array(
		'user' => FALSE,
	), $atts );

	$uname = $userlogin['user'];     

	if ($uname!== FALSE) {             
		$user = get_user_by( 'login', $uname );  
	
		if ($user == false) { 
			$message ='Sorry no such user found.'; 
		} else { 
			$udata = get_userdata( $user->ID );
			$registered = $udata->user_registered;
			$message = 'Member since: ' . date( "d F Y", strtotime( $registered ) );
		}
	} else { 
		$message = 'Please provide a username.'; 
	} 

	return $message; 
} 

add_shortcode('membersince', 'wpb_user_registration_date');

Once done, you can now use the shortcode in your blog posts and pages. Let’s say you want to display since when “John” is a registered user of your blog:

[membersince user=john]

That’s it!

Credit: WpBeginner

The post WordPress shortcode to display user registration date appeared first on WPRecipes.

First, place the code below into your theme’s functions.php file and don’t forget to save.

function wpb_user_registration_date($atts, $content = null ) { 
	$userlogin = shortcode_atts( array(
		'user' => FALSE,
	), $atts );

	$uname = $userlogin['user'];     

	if ($uname!== FALSE) {             
		$user = get_user_by( 'login', $uname );  
	
		if ($user == false) { 
			$message ='Sorry no such user found.'; 
		} else { 
			$udata = get_userdata( $user-ID );
			$registered = $udata->user_registered;
			$message = 'Member since: ' . date( "d F Y", strtotime( $registered ) );
		}
	} else { 
		$message = 'Please provide a username.'; 
	} 

	return $message; 
} 

add_shortcode('membersince', 'wpb_user_registration_date');

Once done, you can now use the shortcode in your blog posts and pages. Let’s say you want to display since when “John” is a registered user of your blog:

[membersince user=john]

That’s it!

Credit: WpBeginner

First, place the code below into your theme’s functions.php file and don’t forget to save.

function wpb_user_registration_date($atts, $content = null ) { 
	$userlogin = shortcode_atts( array(
		'user' => FALSE,
	), $atts );

	$uname = $userlogin['user'];     

	if ($uname!== FALSE) {             
		$user = get_user_by( 'login', $uname );  
	
		if ($user == false) { 
			$message ='Sorry no such user found.'; 
		} else { 
			$udata = get_userdata( $user->ID );
			$registered = $udata->user_registered;
			$message = 'Member since: ' . date( "d F Y", strtotime( $registered ) );
		}
	} else { 
		$message = 'Please provide a username.'; 
	} 

	return $message; 
} 

add_shortcode('membersince', 'wpb_user_registration_date');

Once done, you can now use the shortcode in your blog posts and pages. Let’s say you want to display since when “John” is a registered user of your blog:

[membersince user=john]

That’s it!

Credit: WpBeginner

The post WordPress shortcode to display user registration date appeared first on WPRecipes.

Revive Old Post

As the name says, Revive Old Post is a plugin which aim to a simple goal: giving a new life to your old posts. How? Simply by automatically sharing them on social media sites such as Twitter, Facebook or Google+.

I installed this plugin a while ago on both CWC and WPRecipes, using the default settings. The results are amazing! The plugin automatically picks a random post and shares it on my Twitter account. Old posts are retweeted, shared, visited again and discovered by new people who weren’t following my blog at the time of the inital post publishing.

Revive Old Post is also available in a pro version with lots of interesting extra features: include hashtags and images, post to multiple accounts at once, custom schedule, and a lot more.

Download/Info

OptinMonster

Over the past months, OptinMonster has gained an incredible popularity among bloggers, web marketers and agencies who want to grow their email list.
Why? Because it works.

This plugin’s aim is to convert website visitors into subscribers and customers. To do so, OptinMonster is using an impressive technology called Exit Intent, which detects user behavior and prompts them with a targeted campaign at the precise moment they are about to leave.

I have been testing OptinMonster on many websites and I totally understand the hype about this plugin. I haven’t installed it on my websites yet, but come back soon, it’s only a matter of time.

Download/Info

All In One SEO Pack

Ok, most serious WordPress users probably know this one since a long time. In fact, All In One SEO Pack is one of the most popular WP plugins ever and has been downloaded millions times. As it is extremely efficient and provides great results, it definitely deserves a place of choice in that list.

Once installed, All In One SEO Pack adds a new page to your blog’s dashboard, which allows you to control every SEO-related aspect of your website: XML Sitemap and Google Analytics support, titles’ optimization, meta tags, canonical urls, duplicate content, and a lot more.

This little gem is also available as a pro version, which provides additional features.

Download/Info

upPrev

What do your readers do when they’re done reading your post? Well, 70% of them simply leave and never come back. This is a shame, right, considering that your blog is (hopefully!) full of amazing content? This is where upPrev comes in handy.

The plugin automatically displays a cool, animated fly-out or a fade box with related content once the reader has reached the bottom of the post. A great way to suggest more content to read and keep people interested by your posts.

Download/Info

SEO Smart Links

SEO Smart Links is a super useful piece of code which turns a user-defined list of words or sentences into HTML links.

There’s two different usages for this plugin: The first one is to use SEO Smart Links to create automatic internal links to your posts. The second is to use it to turn words or sentences into affiliate links, and maximize your chances of getting affiliate commissions.

For example, let’s say that I’m writing a post about WordPress Themes. I configured SEO Smart Links to automatically turn the sentence “Premium WordPress Themes” to a link to WP Zoom, one of my favorite premium WP Themes seller. Then, when I’ll write “Premium WordPress Themes” on this article of mine, it will appear on the blog like this: Premium WordPress Themes.

Download/Info

Monarch

Obviously, a great way to gain traffic to your blog is to have people sharing your posts on social media. If you want people to do so, you don’t only need great content, you need to provide your visitors with a fast, easy, and reliable way to share your content on Facebook, Twitter and other social media communities.

There’s literally a ton of “Sharing” plugins, both free and premium. So, why is Monarch the best of them? First, Monarch has been created by ElegantThemes, a company that release beautiful and well coded WP Themes since around 2008. Then, Monarch has more features than its competitors: automatic pop-ups, a floating sidebar, fly-ins, over 35 social networks to choose from…

And as the last but not the least, Monarch is fast. You probably know that Google values page loading as one of the most important factors to give you good rankings, so you shouldn’t let a bloated plugin mess with your SEO.

If you’re looking for a free alternative to Monarch, I recommend Sharebar which is in my opinion the best free sharing plugin available now.

Download/info

Before pasting this code in your function.php file, edit line 11 and replace contact.php by the name of the page you want to disable the editor for.

add_action( 'admin_init', 'hide_editor' );

function hide_editor() {
	// Get the Post ID.
	$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;
	if( !isset( $post_id ) ) return;

	// Get the name of the Page Template file.
	$template_file = get_post_meta($post_id, '_wp_page_template', true);
    
    if($template_file == 'contact.php'){ // edit the template name
    	remove_post_type_support('page', 'editor');
    }
}

Credit: Snipplr.

The post How to disable content editor for a specific page template appeared first on WPRecipes.

Before pasting this code in your function.php file, edit line 11 and replace contact.php by the name of the page you want to disable the editor for.

add_action( 'admin_init', 'hide_editor' );

function hide_editor() {
	// Get the Post ID.
	$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;
	if( !isset( $post_id ) ) return;

	// Get the name of the Page Template file.
	$template_file = get_post_meta($post_id, '_wp_page_template', true);
    
    if($template_file == 'contact.php'){ // edit the template name
    	remove_post_type_support('page', 'editor');
    }
}

Credit: Snipplr.

Before pasting this code in your function.php file, edit line 11 and replace contact.php by the name of the page you want to disable the editor for.

add_action( 'admin_init', 'hide_editor' );

function hide_editor() {
	// Get the Post ID.
	$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;
	if( !isset( $post_id ) ) return;

	// Get the name of the Page Template file.
	$template_file = get_post_meta($post_id, '_wp_page_template', true);
    
    if($template_file == 'contact.php'){ // edit the template name
    	remove_post_type_support('page', 'editor');
    }
}

Credit: Snipplr.

The post How to disable content editor for a specific page template appeared first on WPRecipes.

You’ll get 150 high-quality vintage vector illustrations from Vintage Vectors Studio and Lorand Okos, that covers a wide gamut of topics from coffee to pizza to motivational posters. Customize them any way you’d like with the original .EPS files, and JPG preview files.

Normally, this professional collection of vintage vector illustrations sells for $750, but for a limited time only, you can get all 150 vectors for only $9 – That’s a ludicrous savings of 99% off the regular price.
See all the illustrations.

Simply paste this code where you want to display the active plugin list. Once saved, active plugins will be displayed.

function wpr_active_site_plugins() {
    $the_plugs = get_option('active_plugins'); 
    foreach($the_plugs as $key => $value) {
        $string = explode('/',$value); // Folder name will be displayed
        echo $string[0] ."\n";
    }
}

wpr_active_site_plugins();

Thanks to Snipplr for the tip!!

Simply paste this code where you want to display the active plugin list. Once saved, active plugins will be displayed.

function wpr_active_site_plugins() {
    $the_plugs = get_option('active_plugins'); 
    foreach($the_plugs as $key => $value) {
        $string = explode('/',$value); // Folder name will be displayed
        echo $string[0] ."\n";
    }
}

wpr_active_site_plugins();

Thanks to Snipplr for the tip!!

The post WordPress hack: Show all active plugins appeared first on WPRecipes.

Simply paste this code where you want to display the active plugin list. Once saved, active plugins will be displayed.

function wpr_active_site_plugins() {
    $the_plugs = get_option('active_plugins'); 
    foreach($the_plugs as $key => $value) {
        $string = explode('/',$value); // Folder name will be displayed
        echo $string[0] ."\n";
    }
}

wpr_active_site_plugins();

Thanks to Snipplr for the tip!!

The post WordPress hack: Show all active plugins appeared first on WPRecipes.