How to Hide the WordPress Upgrade Message in the Dashboard

There was a huge debate on Digging into WordPress blog whether developers should let their client’s upgrade or not. We believe to educate our clients and encourage them to be self-sufficient therefore we have created an infographic that shows you a step by step guide to upgrade WordPress. For Backing up WordPress, we recommend using BackupBuddy Plugin to our clients. But we do have clients that do not want to deal with maintenance updates, so they want us to take care of them therefore we also have that option available. For these clients, we hide the WordPress Upgrade Message.

All you have to do is simply open the theme’s functions.php file and add this:

add_action('admin_menu','wphidenag');
function wphidenag() {
remove_action( 'admin_notices', 'update_nag', 3 );
}

There are plugins available that does this job, but we prefer to use the code above. Now remember, this only removes the upgrade bar that shows on all screens. It does not disable the Plugin updates or theme update notifications that shows up on the update page. For our clients that have us do the maintenance for them, we make sure that their site is up to date with all plugins, and the core.

Now Jeff Star posed an issue that he has to go in client’s dashboard to see whether plugins and such are activated. Well we already have a fix for that. We are using WP Status Dashboard (Our Tutorial on How to use WP Status Dashboard). This plugin/script lets us view all of our clients information on one screen, so we know exactly what needs to be upgraded on which client.

Remember, keeping your WordPress up to date is essential for site security. So if you do remove the nag, you need to stay on top of the upgrades for your clients.

Will you be doing this for your client’s site?? Do you have a better solution?

How to Add Custom Fields Automatically on Post Publish in WordPress

When creating our WPBeginner Gallery Site, we needed to generate custom branded short urls automatically for each site submitted to the gallery, and then store them as a custom field as soon as the post was published. Now while we will leave the auto-generating Bit.ly shortlinks for each post for our next topic, we will cover how to add custom fields automatically on post publish in WordPress. This can be very useful for developers who are looking to push WordPress to the next level.

First thing you need to do is open your theme’s functions.php file and paste the following code:

add_action('publish_page', 'add_custom_field_automatically');
add_action('publish_post', 'add_custom_field_automatically');
function add_custom_field_automatically($post_ID) {
	global $wpdb;
	if(!wp_is_post_revision($post_ID)) {
		add_post_meta($post_ID, 'field-name', 'custom value', true);
	}
}

Then simply replace the field-name and custom value with your Custom Field Name, and the Value. This is a relatively simple trick, but it can be very effective when trying to use WordPress for other than blog purposes.

Increase your WordPress Blog Performance by using Google App Engine

Page speed is one aspect of SEO. Google and other search engines and – above all – your blog visitors love fast page loading. As the blog owner, you value your readers’ time, so don’t let them wait more than 10 seconds for any page they want to read in your blog. You may be aware that there are a lot of ways to improve your blog page speed, from using cache plugins (like W3 Total Cache) and optimizing themes, to using a good hosting server (like HostGator) and finally – using a CDN. Yes, WordPress beginners often miss out on the latter. Using a CDN will greatly improve your page speed performance, but generally such services are NOT free.

So what is CDN anyway? Wikipedia defines CDN as:

“A content delivery network or content distribution network (CDN) is a system of computers containing copies of data, placed at various points in a network so as to maximize bandwidth for access to the data from clients throughout the network. A client accesses a copy of the data near to the client, as opposed to all clients accessing the same central server, so as to avoid bottlenecks near that server.” (Source: Wikipedia)

In this article we will be showing you how to use Google App Engine to act as a CDN. Since Google data centers are distributed all over the world, this is a great free service to use with a limit of 1GB/day. What can you host on Google App Engine? The files which are most essential for you to host on Google App Engine are static files, including theme CSS, theme JavaScript files, and theme images. Hosting these static files on Google App Engine will reduce your server load and speed up your page loading time. And that is exactly what will improve your SEO and user experience.

Follow the step-by-step instructions below to start using Google App Engine to host your static files:

1. Create a Google Account. If you have a Gmail account that will do. I won’t explain it in details here, visit here to create one (Skip to Step 2 if you already have a Google Account).

2. Sign up for a Google App Engine Application. Your cell phone might need to be verified again.

Signup for Google App Engine Application

3. Create a Google App Engine Application (in this example I called it myfreecdn).

4. I use Python. Download Python SDK and Google App Engine SDK, and install them both.

Google App Engine Launcher

5. Open Google App Engine Launcher and open Preferences from menu Edit » Preferences, then update the Python path to where you install the Python execute file.

Google App Engine Launcher Preferences

6. Create a new Application by going to File » Create New Application, fill in Application Name (this should be the same as Application identifier so in my case: myfreecdn), then choose where your file will be saved.

Add New Application

7. Now open the folder where you saved the Application, and make two new folders, one called “styles”, and the other called “images”. The Styles folder is where you put your CSS and JavaScript files. Likewise, the Images folder is for image files.

8. Now edit the app.yaml file in the application folder and add the following:

application: myfreecdn
version: 1
runtime: python
api_version: 1
default_expiration: "7d"
handlers:
- url: /images
  static_dir: images
- url: /styles
  static_dir: styles

9. Now, copy over all your CSS and JavaScript files to the “style” folder and the image files to the “images” folder.

10. To deploy your Application, just press the button “Deploy” on the toolbar. You would need to enter your Google account account and password. Allow the process to be completed.

11. Now you should be able to access your files by going to this address: http://[app-id].appspot.com/[images|styles]. An example location could be: http://myfreecdn.appspot.com/styles/style.css

12. Now go to your WordPress theme, edit all your style URLs to use your Google App Engine URL. And don’t forget to update your style.css relative image URLs to use the Google App Engine URL as well.

13. Upload the updated theme files back into your WordPress blog and test it. (You can use FireBug from Firefox extensions for this purpose.) Now you should be able to feel the difference.

All in all, this is just one way to increase your blog performance. But using this method will have a great impact. I myself use this technique to increase my blog performance. I would like to share with you the benefits of my experience. I hope you find this advice useful.

Editorial Note:

While Ivan shares a great technique here to utilize Google App Engine as a CDN for static files, this is just a shortcut way for making some difference. If you are using it for a very small site, then this might be a good idea. Otherwise there are disadvantages to using this method:

1. You are still serving all blog post images, thumbnails, or any other post attachments without a CDN. So you are not maximizing performance.
2. This method is extremely time consuming if you decide to make changes to your theme because everything is hard coded.
3. There is a limit for free usage 1GB / Day, so if you exceed that you will still have to pay for this service (which is expensive compared to competitor prices). Even if you pay, you would not be able to utilize CDN for the entire site (See point 1) unless ofcourse you want to upload everything on Google App Engine account manually and then manually edit all of your previous post images and thumbnail URLs.

We recommend that you get it right from the start by using MaxCDN. We are using their services to speed up our site. You can pay $39.95 to get 1TB of Bandwidth which is good for one year of use (use the coupon “wpbeginner” to get additional 25% off). This is 635GB additional bandwidth then what Google gives you for the year, and if you pay google $0.12 for each additional bandwidth like their pricing says, then you will end up paying $76.2 for the year (almost twice the price that you would pay for MaxCDN for a year).

Second the best part is that MaxCDN uses Pull Zones which also works with WordPress when using the plugin W3 Total Cache. What this means is that all files will be served through their CDN without you altering a single line of code. Just have the right settings in W3 Total Cache.

How to Add Default Content in Your WordPress Post Editor

Have you ever find yourself entering the same text in all of your posts? Often people do that such as asking people to subscribe to their feeds, retweet the post, share it on facebook etc. You can always use a simple tag to add it right after the content, or you can add that text as the default content in your WordPress post editor.

Simply open up your WordPress theme’s functions.php file and paste the following code within the PHP tags ofcourse.

add_filter( 'default_content', 'my_editor_content' );
function my_editor_content( $content ) {
	$content = "If you like this post, then please consider retweeting it or sharing it on Facebook.";
	return $content;
}

And you are done. Try to create a New Post, and you should see the new content there.

Update (January 24, 2013) – One of our users asked us how to add different content for different post type in the comments. The code below will show you how to add different default content in your WordPress post editor for each specific custom post type:

add_filter( 'default_content', 'my_editor_content', 10, 2 );

function my_editor_content( $content, $post ) {

    switch( $post->post_type ) {
        case 'sources':
            $content = 'your content';
        break;
        case 'stories':
            $content = 'your content';
        break;
        case 'pictures':
            $content = 'your content';
        break;
        default:
            $content = 'your default content';
        break;
    }

    return $content;
}

WordPress Custom Fields 101: Tips, Tricks, and Hacks

One of our users pointed out that we have a lot of hacks and tutorials that cover WordPress Custom fields, but we never bothered explaining what exactly is a WordPress Custom Field, and how it can be utilized. So in this article, we will share a step by step guide to use WordPress Custom Fields which should beginning developers or DIY users very excited. Furthermore, we will be compiling a list of cool things you can do with WordPress Custom Fields in this article, so this will really show you how custom fields can extend the power of WordPress.

Note: In WordPress 3.1 – the core team wanted to make the Write Panel cleaner, so they unchecked the view button for Custom Fields. If you don’t see them, then click on the Screen Options Tab (in the top right hand corner), and check Custom Fields.

What are WordPress Custom Fields?

Custom Fields are a form of meta-data that allows you to store arbitrary information with each WordPress post. While this does not sound so powerful, it is the single most powerful component of WordPress posts and content types (aka post types). This meta-data is handled with key/value pairs. The key is a “name” which identifies the specific field thus it is a constant and should stay the same for all posts however you can use the same key multiple times within one post. The value is the information that will be displayed for the field when you call it in your WordPress theme thus it can change with each post.

Now let’s take a look at a very basic example of WordPress Custom Fields in Action. While editing your posts, you see this section called Custom Fields. Scroll down a little, and you should see one. We will use that box to add the post author’s mood at the time of writing. So you will add the name “Today’s Mood”, and then you will add the value which can be Happy, Sad, Excited etc.

Custom Fields to display the Mood

Now once you add this field, and save the post. This additional arbitrary information related to your post is stored in the database, and it can be called anywhere within your WordPress theme. So for this very basic example, we will use the very basic way of displaying it in the post. Let’s say, you want to display your mood before the person reads the post, so they know what to expect. Well, then you will open your single.php file and add this code inside the WordPress loop:

<?php the_meta(); ?>

It will display something like this:

Today’s Mood: Happy

Now by using the_meta hook, you will display all fields associated with that post. This is great when you have one field, but if you have 5 different fields that you want to display at 5 different locations, then we will have to use get_post_meta hook. Let’s say you want to display the custom field at a separate location by itself, then you will add the following code within the post loop.

<?php echo get_post_meta($post->ID, 'key', true); ?>

Note: replace the key value to whatever your key is.

What if you have a custom field like ‘songs’ for the songs you were listening while writing the post? Well you can have multiple ‘songs’ keys and have different values stored from the backend. Then inside your loop paste a code like this:

<?php $songs = get_post_meta($post->ID, 'songs', false); ?>
	<h3>This post is inspired by:</h3>
	<ul>
		<?php foreach($songs as $song) {
			echo '<li>'.$song.'</li>';
			} ?>
	</ul>

Note the trick here is the third parameter “false”. By changing it to false, we tell the function to return an array of the values for the specified key. This is a very handy trick for displaying multiple key values.

Source: Jeff Starr at Perishable

Extending the Power of Custom Fields

Custom fields can and does go beyond just the mood and songs example. Powerful plugins like Yoast’s WordPress SEOWP-Post Ratings, and many more are utilizing custom fields to achieve their respective functionalities. Many powerful frameworks like GenesisHeadwayiThemes Builder and others are also utilizing custom fields to control different single post layouts. In short, custom fields played a crucial role in revolutionizing the way we think of WordPress themes.

Now you might be wondering if so many of these plugins are using custom fields, then why don’t I see them in my post admin panel? This is because a lot of these plugins provide you with a simpler user-interface (UI) to improve user experience (UX). For example WordPress SEO Plugin gives you a section to enter your title, description, keyword etc. for each post. Genesis gives you a visual examples of layouts to select from. Themify gives you color boxes to select different color schemes per post. Now imagine if all of these frameworks and plugins required you to enter each of their custom field key’s and value manually, you will spend weeks writing a single post. Because you would have to print out a 15 page cheat sheet to memorize each specific key and values attributed to it. To avoid clutter and confusion, these theme and plugin developers hide their custom fields entries and give you a more robust easy to use interface.

If you are a new developer or theme designer looking to learn, then you will be wondering how exactly are they hiding these fields? Well, all you have to do is add an underscore ‘_’ before the value of your custom field’s name. So the name would look like this: “_wpbeginner-trending”, and the value could be generated through a custom user interface or dynamically through your code. So if you were to add the custom fields through your plugin or theme’s functions file, then you would add it like this:

add_post_meta($id, '_name', 'value');

Notice that underscore must be there in order for it to remain hidden from the user. Often when you are dealing with clients that are not very “tech-savvy”, it is very useful to utilize the technique above. You can also entirely remove the custom fields area and create a custom write panel (with a better user-interface) to help your client maximize the power WordPress without having them confused. This is extremely important when you have a lot of meta-data customization options available in your theme. An example of a write panel can be seen in the image below:

Custom Write Panel for WordPress Custom Fields

The image reflects the current version of our portfolio located at Uzzz Productions. Now you are probably wondering how did we create this write panel? Well, please follow this tutorial on how to add custom meta boxes in WordPress. These write panels essentially can replace the default custom fields layout, so once you are done creating the easy write panel for your client’s theme, then it is time to go ahead and disable the default custom field display for them.

How to Hide Custom Fields from Your Users

Open up your theme’s functions.php file and add the following:

add_action('admin_init','remove_custom_meta_boxes');
function remove_custom_meta_boxes() {
remove_meta_box('postcustom','post','normal');
remove_meta_box('postcustom','page','normal');
}

Now we will go into sharing some of the cool tips, tricks, and hacks for custom fields. Custom fields are limited to your imagination only, so there are tons of cool tricks that we might miss.

Using Custom Fields with Conditional Statement

It is always best practice to display custom fields with a conditional statement, so if that field does not exist, then a default content would take it’s place. For example, if you are not listening to a song while writing the post, so you forgot about the field and left it empty. Well, then the default content can take it’s place. Look in the example below:

<?php $songs = get_post_meta($post->ID, 'songs', true);
//Checking if anything exists for the key Songs
if ($songs) { ?>
Listening to: <?php echo $songs; ?>
<?php } //if there is nothing for songs then display
else { ?>
Listening to: Nothing (Grooveshark is under maintenance)
<?php } ?>

By displaying the conditional elements and default content, you keep the styling of your theme intact, and it looks professional.

Using Custom Fields as a Conditional Statement

Using custom fields as conditional statements can be a very handy technique. We will show few examples of how you can utilize custom fields as a conditional statement for your WordPress theme design.

Only Display Posts with a Specific Custom Field

The best part about query_posts function in WordPress is that it has a parameter for custom fields. So we can use it to create a loop that only displays posts with a specific custom field key and/or value. All you would have to do is enter thequery_posts tag above your post’s loop statement. Let’s say you want to display posts that you wrote while listening to a music as opposed to posts that you wrote in reflection of the book you read.

You will paste the following query before you start the loop:

query_posts('meta_key=music');

This code will list posts with the meta key music present.

Let’s say you want to customize it a bit more by saying you want to display posts that you wrote while listening to Eminem’s Songs. Well then, you will customize the codes like this:

query_posts('meta_key=music&meta_value=Eminem');

Display the Digg Button only when the custom field is present

Not every post is meant to be submitted to Digg. For example your blog’s anniversary post will most likely not make it to the front page. By having it submitted, you can actually hurt the chances of your site ever hitting the front page. Well to solve this issue, you can display the digg button only when a specific custom field is present.

Paste the following code in your single.php file inside the loop:

<?php 
// check for digg button for single page
$digg = get_post_meta($post->ID, 'Digg', $single = true);
// if there's a single page digg button
if($digg !== '') { ?>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
<?php } // end if statement
// if there's not a digg button
else { echo ''; } ?>

Now all you have to do when writing your posts is enter the custom field with the key “Digg” and the value “true”.

Source: How to Add a Digg Button Using Custom Fields

You can use this similar technique to display the Facebook Like button in selective WordPress posts.

Rewrite Guest Author’s name with Custom Fields

Have you ever had a guest post on your blog? How do you go about giving the author full credit? Some bloggers create entire new author profiles for their guest authors in order to display the right name. We think that it is pointless to create extra user profiles if you know that this guest author will only post once. This trick will let you replace the author name with a custom field.

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

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );

function guest_author_name( $name ) {
global $post;

$author = get_post_meta( $post->ID, 'guest-author', true );

if ( $author )
$name = $author;

return $name;
}

Now every time that you are posting a guest post, just make sure that you add a custom field called guest-author and it will replace the author’s name with the text that you put in that custom field.

Example:

Add guest author name with Custom Fields

Source: How to rewrite Guest Author Name with Custom Fields in WordPress

Display Custom Fields Outside the Loop in WordPress

Until now in this article, all we have shown you is adding custom fields inside the post loop. Well, there will be times that you need to display post-specific content outside the post loop. All you have to do is display the custom fields like this:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'Your-Custom-Field', true);
wp_reset_query();
?>

You will need to make sure that you change the part where it says “Your-Custom-Field”.

Source: How to Display Custom Fields outside the loop in WordPress

Display Custom Header, Footer, Sidebar using Custom Fields

Header, Footer, and Sidebar stays the same for all posts and pages in WordPress. Well, if you are creating a custom design and want to have different sidebar, header, or footer for each post, then it is possible to do so with custom fields. In this example, we will just replace sidebar as an example. You will need to open yoursingle.php or page.php file and find the following code:

<?php get_sidebar(); ?>

Replace it with the following:

<?php 
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

Now when you are writing a post or a page, and you want to display a custom sidebar all you need to do is add the custom field “sidebar” and include the name of the sidebar file. For example if you insert “wpbpage”, it will display sidebar-wpbpage.php as your sidebar.

Custom Sidebar in WordPress using Custom Fields

You must have the file already in place to call it from a specific post. This trick is mostly used in larger magazine style sites, but it is commonly used for custom pages also. One of the easiest way to start out creating a new sidebar file is copying yoursidebar.php codes into this new file and edit/add the codes that you want.

You can use the similar technique to replace header and footer.

Source: Display Different Sidebar for Each WordPress Post

Manipulating the RSS feed content with Custom Fields

Did you ever want to add a specific content just for your RSS readers in a specific post? Well this can also be done with custom fields. In this first example, we will show you how you can use custom field to display specific text/object in your WordPress RSS Feed. This trick will allow you to show different text, advertisement, image, or anything else for each post. First open your functions.php and paste the following codes in the php tags:

function wpbeginner_postrss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) {
if($coolcustom !== '') {
$content = $content."<br /><br /><div>".$coolcustom."</div>
";
}
else {
$content = $content;
}
}
return $content;
}
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

Now just create a custom field called “coolcustom” and add any value you like. You can add google adsense in there, or any other ads/images/text that you like.

In the second technique, we will show you how to add additional text to post titles in RSS. This comes very handy when you are running a blog and have guest posts / sponsored posts. By utilizing this technique, you can tell your RSS readers in the title whether a specific post is a sponsored post or a guest post.

For example if your title was “Start Microblogging in WordPress with Wumblr” and it was a sponsored post, then you can change it to “Sponsored Post: Start Microblogging in WordPress with Wumblr“. Same if someone wrote a guest post etc.

To accomplish this, open your theme’s functions.php file and add the following code in there:

function wpbeginner_titlerss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$gpost = get_post_meta($postid, 'guest_post', true);
$spost = get_post_meta($postid, 'sponsored_post', true);

if($gpost !== '') {
$content = 'Guest Post: '.$content;
}
elseif ($spost !== ''){
$content = 'Sponsored Post: '.$content;
}
else {
$content = $content;
}
return $content;
}
add_filter('the_title_rss', 'wpbeginner_titlerss');

The code above search for two custom fields name “guest_post” or “sponsored_post”. If any of these two custom fields are found with a value “true”, then it will add the appropriate text before the title. This technique can be utilized in various ways to fit whatever you like.

Source: Completely Manipulate Your WordPress RSS Feeds

Set an Expiration Date for Your WordPress Posts

This hack comes becomes very useful when you are running a contest because you might be posting information such as clues or hints that you don’t want to stay up for ever. Instead of manually removing the article, you can just make it expire automatically. It also works if you have a product that you are offering a discount on. You posted it on your blog, but you don’t want that discount to stay on your blog after its over. So you can remove it automatically with this code.

Your loop would need to look like this:

<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>
$expirationtime = get_post_custom_values('expiration');
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}

$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween > 0 ) {
// For example…
the_title();
the_excerpt();
}
endwhile;
endif;
?>

Note: You may have to customize the codes to fit the look of your theme.

Once you pasted this code, you can use custom fields when writing a post to set an expiration date. Make sure you select the key “expiration” and use the the following date format: mm/dd/yyyy 00:00:00

Alternatively, you can the Post Expiration Plugin.

How to Style Individual Posts with Custom Fields

Want an entirely different look for your WordPress single posts? Well you can do this by adding custom post classes via custom field. We have written an entire article on how to style each WordPress post differently, so this code is based on that tutorial.

First thing you need to do is create a custom field with the name “post-class” and then add the value which will be your class. So in this example, we will use “anniversary”. Once you have done that, then add the following code inside your loop:

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Now if you look in your loop, there is a post_class function inside a div class. Just replace that with something like this:

<?php post_class('class-1 class-2 ' . $custom_values); ?>

Alternatively, you can also add inline css to the header of your single pages. If that is something that you are looking to do, then open your header.php file, and insert the following code somewhere between the head tags.

<?php if (is_single()) {
$customstyle = get_post_meta($post->ID, 'customstyle', true);
if (!empty($customstyle)) { ?>
<style type="text/css">
<?php echo $customstyle; ?>
<style>
<?php }
} ?>

Once this code is added, now you can simply add the custom field with the name “customstyle” and add any css text in the value. An example text would be this:

#coolimageclass{border: 5px solid #ccc;}

We hope that this article broadens your horizon about the WordPress custom fields. If you know of other cool tricks that can be done with WordPress custom fields, then feel free to post in the comments.

Place where your ideas are turned into reality