Don’t Display Popups Right at Startup

One of the really irritating moments is when a huge popup splashes right into your face even before you are given the chance to have a glimpse at the site. What is more, such a popup can make users leave your site altogether rather than subscribe for your newsletter and continue to the site itself. This is why you should avoid using popups at startup – frequently they simply scare your visitors (who could otherwise buy something from inside your site) away.

Select Proper Sizes

Size matters with popups. Obviously, too large is more obtrusive, so try to keep your popups small. Your options here vary depending on the abilities of the WordPress popup plugin you are using but a size of 200×300 (or less) should be more than sufficient.

Carefully Select the Display Schedule

The next most irritating thing after a popup at startup is a popup at each page refresh. Well, it is true that fewer visitors will experience the pain simply because they would leave in an instant without browsing more pages, but if you don’t want to scare all your visitors away, don’t even think of such a nag as a popup at each page refresh. A popup at each 5 or 10 pages, or that is displayed at predefined events, isn’t that obtrusive, so you’d better stick with a similar display schedule.

Include an Option Not to Display More Popups

For some users even a popup once in 5 or 10 pages might be too much. This is why, after you have displayed a popup once, give the user a choice not to see more of them.

Consider Popup Alternatives

Popups aren’t the only way to make your message visible. For instance, sidebar opt-in forms are a good alternative when you want to collect newsletter subscribers. In-content opt-in forms also work for the purpose. Gathering email addresses from comments (with the commenter’s consent, of course) is yet one more alternative for building a mailing list.

There are many more ways to make popups less obtrusive and more user-friendly in general. For instance, it goes without saying that a popup must have a Close button, so if the user doesn’t want to subscribe, he or she can continue to the site. It is all these small details that make or break a popup. As a result, it is better to fine-tune these details in order to maximize user experience and the efficiency of popups as a whole.

This is a guest post by Ada. Ada is the Blogger Relations Manager at WinkPress – a web resource about WordPress, its themes, and plugins. If you visit our site, you will learn more about WordPress popup plugins and many other WordPress plugins you can put to use on your site.

Image Credit: John Fischer

Related posts:

1. WordPress Adds Guided Transfers of WordPress.com blogs To Self Hosted WordPress
2. Dropbox CDN Plugin For WordPress Helps Reduce Your Site’s Bandwidth
3. Mozilla’s Browser ID Login System – One Username And Password is All You Have To Remember
4. WordPress Dashboard Shows 0 Posts? Your Site Isn’t Hacked
5. Add Nofollow Links From WordPress Post Editor

5 Thing To Remember Before Using Popups On WordPress originally published on Ampercent

The images and media uploads can be further organized into nested sub-folders on the basis of month and year, this setting is available under Settings > Media within your WordPress administration area.

The default image upload folder works just fine, but there are situations when you may want to use a different folder for storing the images that are used in your blog posts and pages. Large websites, often use a sub-domain or a separate web server for storing and serving the images, while  Amazon S3, MaxCDN are some good services that can be used to fetch images and other static files via a content delivery network.

The Problem Of Moving All Images From One Directory To Another Directory In WordPress

Let’s say you have stored images, videos and all static files at files.domain.com instead of the default image upload location wp-content/uploads/, which ships out of the box with WordPress. This was your initial setting 2 years back and during these two years, you have written 2500 blog posts and uploaded 2000 images (just an example).

Now your website has a decent amount of traffic and you want to speed up the loading time by fetching images via a cached folder or an external content delivery network such as Amazon S3 or MaxCDN.

There are two problems with images that are stored in a sub domain of your website or in any other folder that is outside the default image upload directory:

1. WordPress caching plugins such as W3 Total Cache and WP Super Cache can not cache files that are in a sub domain. These plugins will only cache internal files that are present within your WordPress media uploads folder ( the folder you have defined under Settings > Media).

2. You can surely download all the images from your image server and re-upload it to your external content delivery network. But the question is – how will you update all the image URL’s that is contained within all the old blog posts?

Move Images From One Directory To Another Without Breaking Your Blog Posts

Hence, moving all the images from one folder to another folder is just half the work done. You have to replace the older image URL’s with their newer counterparts, the following steps will tell you how to do that:

1. Use Filezilla or another FTP client to download the entire image upload directory on your computer.

2. Create the target folder and re-upload the entire image directory to its new target location on the same domain. It is advised to use the default image upload directory, if you are considering using caching plugins such as W3 Total cache.

For example: Lets say your older image folder is img.domain.com/images/ and you want to move all the images from this subdomain to wp-content/uploads/. Create a new folder at wp-content/uploads/old-images/ and upload the entire image directory here.

3. Be careful, you must preserve the file names of images and their corresponding folder structure. A single mistake in the name of any directory and the whole procedure will fail.

4. Take a back up of your WordPress database.

5. Install the Velvet Blues Update URL’s plugin. This script lets you perform a search and replace for URL’s in your WordPress database.

6. In the Old URL field, enter the base URL of your old media directory. In the new URL field, enter the base URL of your new media directory.

For example: http://img.domain.com/images/ will go in the old URL text field, while www.domain.com/wp-content/uploads/old-images/ will go in the new URL text field.

7. Click “Update URL’s Now” and its done. Load an old post and it should fetch the image from its new media directory.

If you find that the images are appearing broken and not loading at all, there is a high chance that you have messed up the image URL’s with a wrong address. In that case, restore the database backup and start the above procedure all over again.

The above technique can be used with external content delivery networks as well. All you have to do is get the newer base URL from the external CDN and replace it.

One word of caution: double check the folder structure in the target location. If its not a mirror copy of your older image server, updating the old image addresses to their newer counterparts won’t work.

Related tutorials:

1. How to migrate from one hosting provider to another
2. How to move core WordPress files to a different folder within your domain

Related posts:

1. How To Move The Core WordPress Files Of Your Blog to a Custom Directory
2. WordPress tip-Store Blog post Images in a different Folder or Subdomain
3. Add Multiple Images To WordPress Post Editor By Drag And Drop
4. Protecting The Wp-admin Folder With HTACCESS
5. WordPress Image Attachment Pages Can Sometimes Hurt Your Site’s SEO

How To Migrate WordPress Media Directory From One Folder To Another – A Guide originally published on Ampercent

At first I thought the problem might be associated with my site’s theme and how the loop is made. So I logged into WordPress, only to discover that all my blog posts were deleted. The “Right now” section under WordPress dashboard showed 0 posts although all the comments were intact. Here is a screenshot

I felt terrible realizing the situation because the database was working fine and its just that all my posts have been deleted from the database. No Posts and pages were present in the Trash folder as well.

My initial reaction was that someone must have hacked into my WordPress administration area and he has deleted all the posts and pages. I quickly checked my WordPress user account and found that the username and passwords were not changed at all. Not to forget the fact that I use the very awesome WordPress Login lockdown plugin, so it was very unlikely that someone secretly logged into my site’s WordPress administration area.

If you ever come across a similar situation on your site, calm down. Your site and My SQL database are just fine and it is possible to restore all the posts within 5 minutes.

Solve WordPress 0 Posts Error

There is a high chance that the wp_posts table of your site’s MY SQL database needs a repair. Login to your web hosting account, go to phpmyadmin and select the MySQL database of your website. Next, select the wp_posts table, scroll down and hit “Repair” at the bottom

lt should take half a minute until the table is repaired. In my case, all the posts and pages were back just after I repaired the wp_posts table. Phew!

I use an automatic database backup plugin which emails me the database backup after every 3 days. So in my case, the last option would have been to restore a previous database backup to my existing WordPress installation. However, I decided to first post my concern at my Facebook profile and see what other bloggers and geeks recommend. Thankfully, I got this suggestion from RajuPP and it worked like a charm.

Lessons learned:

1. Do not panic when your site acts weird. Think and act!
2. Post your concern on your social profiles. There is a chance that someone knows how to fix the problem you are having at the moment.
3. Do not always listen to the tech support guys. They generally offer good advice but are sometimes clueless about the cause of a problem.

Related posts:

1. Google Shows Hacked Site Notification In Search Results
2. Customize the Number of Posts On Different Pages of your WordPress Blog
3. WordPress Tip – Find All Pages of Your Site Which Don’t Have a Meta Description or Title Tag
4. Using WordPress Custom Fields to Show HTML Codes On Specific Pages Of Your Site
5. Exclude Posts of Certain Categories From The Homepage Of A WordPress Blog

WordPress Dashboard Shows 0 Posts? Your Site Isn’t Hacked originally published on Ampercent

Google is becoming very serious in their attempt to identify original authors and people who have trust and expertise. If Google thinks that your are a reputed person in your industry, your thumbnail image will be shown in search result pages. An example is shown below:

This is a win-win situation for both users and Google. After seeing the author thumbnail, users will consider your page as trustworthy and they are most likely to click that link and land into your page, looking for the answer they are looking for. Google wins, because their users can quickly find the best content.

Adding authorship markup across all the pages of your site is fairly easy. I have detailed all the steps in my previous tutorial here – Adding authorship markup rel=”author” in WordPress. Here is the pictorial representation of how the rel=”author” markup tag should be implemented on your website.

When you Can’t Edit Your Website’s Template – Add Authorship markup Using URL Parameters

In order to apply the correct syntax for Authorship markup, you have to modify some parts of  your site’s HTML code and add the desired rel=”author” and rel=”me” tags.

Now, how do you implement authorship markup on a site where you don’t have the permission to edit or modify the HTML template? What if your site is on a free blogging platform e.g Tumblr, Posterous, Google Sites – where you don’t have enough options to modify the HTML and add the desired author tags?

Luckily, Google has an alternative way to help you out. Here is what you have to do:

1. Open your Google Plus profile and copy your profile URL.

2. When you are publishing a new page on your site, use the following code at the bottom of your page

<a href=”Your Google Profile URL?rel=author”>+Your Google Profile Name</a>

3. This is important.

You must use the + before your Google profile name because this syntax tells Google that this anchor text points to the Google profile of the person and it is not linked accidentally or unintentionally.

4. If you don’t have enough permissions to edit the HTML source of your blog post, you can always write your name in plain text and add the rel=”author” URL parameter using the “Link” button on your site’s text editor.

5. One last step. Complete this form and let Google know that you are using URL parameters for author markup on your site.

The full markup is more bulletproof and recommended for users who can edit the HTML template of their sites. Do not use this alternative method, thinking that both of them are equally feasible. However, if you can’t implement the full markup, this is the only workaround to have authorship markup support on your site using special anchors and URL parameters.

Watch the following video where Matt Cutts and Othar Hansson talk about Authorship markup for sites who can’t edit the HTML source of their template.

http://www.youtube.com/watch?v=gG3Oh7Ues8A

Related posts:

1. A Guide On Adding Support For Authorship Markup In Your WordPress Blog
2. Markup.io Lets you Add Custom Comments on Any Webpage
3. How to Know the Number of Indexed Pages Of Any Website
4. How to NoFollow The Post Author Link in WordPress
5. Add Language Translation To Your Website Using Google Translate AJAX API

Adding Authorship Markup On Your Website Using Special Anchors And URL Parameters originally published on Ampercent

Whenever you enter the address of a webpage in your browser’s address bar, the browser requests data from the server where the page is originally hosted. The web server returns the data but before the browser receives and renders the data at the clients end, an HTTP header is returned by the web server that has the status code of the given page.

In general, HTTP status codes are not meant for human visitors but both desktop and mobile browsers use this information to know more about the present condition of the webpage in question. If the page is in a healthy state, the HTTP status code returned should be a 200 OK. If the page has been moved to a new address, the HTTP status code should be 301 and so on.

There are lots of different HTTP status codes in place and the following table should explain what are the different types of HTTP header responses and their purpose in brief detail:

* This is the only way to tell search engines that your old page has moved to a new location and the newer URL should be re-crawled and re-indexed. Only this server header preserves link juice and Google Pagerank but remember that if the page is part of a redirect chain, a considerable portion of the PR may be lost overtime.

** This should be normally the HTTP status code returned by a webpage if it’s static in nature and needs no GET request from the user.

*** If any of your pages return a 403 HTTP status code, it means that your web server denied the request of the page to Googlebot and human visitors. A possible case is when your web host is facing downtimes or it is blocking spiders and search bots from accessing some parts of your website, so you should be careful about it.

# This is similar to a 404 error but the standard practice is to 301 redirect the missing page to it’s newer location. If the page has no new location, it is recommended to return a 410. If you have temporarily removed the page from the server, use a 503 instead.

How To Check the HTTP Status code of a Webpage?

To check the HTTP status code or the server headers returned by a webpage, go to this link, enter the complete web address of the page in the “check server headers” text box and hit the “check” button.

The site will process your webpage, check the HTTP server header and show it back to you. If you find that the server header returned is 200 OK, it means that the page in question is opening normally to all users and search engines or web crawlers can successfully parse it at their end.

Another good way to bulk check server headers is to use fetch as Googlebot in your your Google webmasters tools account. Go to site diagonostics > fetch as Googlebot and enter the URL of a page within your site to check its HTTP status code.

Also read: List of HTTP status codes

Related posts:

1. How To Embed Custom Codes In The Middle Of A WordPress Loop
2. Add QR Codes To Your Blog Posts For Easy Distribution Of Content [WordPress]
3. Remove Unnecessary Codes From The Head Section of Your WordPress Theme
4. Server Monitor Chrome Extension Checks Uptime Status Of Multiple Sites And Servers Parallely
5. Using WordPress Custom Fields to Show HTML Codes On Specific Pages Of Your Site

Different Types of HTTP Status Codes Explained In Layman’s Term originally published on Ampercent

Search engines display your optimized title tag and a short description snippet on search result pages, so its very important to ensure that every page on your site has a unique title tag and has a small meta description element added to it. While there are situations when you can safey ignore the Meta description tag, but ignoring the meta information on a large number pages can be a big mistake.

Why? Because when a lot of your website’s pages have missing meta description and title tags, search engines might not show them on search result pages for similar queries.

For example: If one page of your site is about “Blue widgets” and there is no title tag or a description snippet on the page, search engines might show a portion of text as meta description which not be ideally optimized. Someone searching for “Blue widgets for an ecommerce site” might not click your site’s link from search results, as the description snippet and the title tag do not have the keywords in them.

Dealing With Missing Meta Description And Title Tags

So what should you do with internal pages which do not have a meta description or title tag? Should you use a script or a plugin which will automatically generate the description and Title tag for you? I would suggest NO.

If you are using some script to auto generate meta descriptions for all pages, there is a high chance that those description and title tags won’t be “humanly optimized”. Machine generated stuff work out of the box but the disadvantage is that they are not very effective, when you are dealing with human eyes on search result pages.

In most cases, the plugin will use the first few paragraphs as meta description and the <h1> heading of the page as the Title tag. This may work but in general, the title tag and the meta description should be added manually, depending upon the phrases and keywords for which you want the page to rank on search result pages.

Find All Pages Which Do Not Have a Meta Description or a Title Tag

Previously, I was using the All In One SEO pack plugin for filling up meta description and title tags for individual posts. The plugin is very useful but the downside here is that there is no easy way to find pages that do not have a meta description or a title tag.

The solution here is to install the missing seo data WordPress plugin. This plugin lets you find out all the pages on your site which do not have a meta description tag or a unique title tag embedded within the page source.

Once you have installed the plugin, go to the options page and you will be able to filter all the pages whose meta description and title meta tags are empty. I ran the test on this site and found that there are more than 200 blog posts where I haven’t filled the SEO details earlier.

Note: The plugin will automatically detect which plugin is being used to show meta description and title tags on all pages of your site. If you’re not using any plugin and using a custom field for meta tags, I am not very sure whether the plugin can detect meta tags using the custom field information.

There is no way to filter posts by only a specific meta tag, however the plugin is useful and saves you a good amount of time from manually finding the pages who have missing SEO details.

Related: More WordPress tips and tutorials.

Related posts:

1. When You Should Ignore the Meta Description Tag?
2. How to Show Meta Description as Post Excerpts in Blog’s Home page
3. What Should Be The Ideal Separator In The Title Tag ?
4. How to Show Category and Tag Descriptions In WordPress Theme
5. Optimizing the Title tags of your WordPress Blog template

WordPress Tip – Find All Pages of Your Site Which Don’t Have a Meta Description or Title Tag originally published on Ampercent

Google is constantly tweaking it’s algorithm and introducing search improvements every week, one of the recent additions being highlighting content creators in search results. Google is moving way beyond pagerank, on page seo factors and wants to add the “trust factor” to their search results; which is why for some queries, you may see author thumbnails on search result pages.

Here are a couple of examples:

As you can see, Google shows a small preview of the author who has written the content so you will instantly know whether this page has substantial amount of authority or whether it is written by an expert. Google will show author thumbnails for prolific writers only and not for everyone by default.

When users see the author image attached next to a result, its most likely that they will click them and come to their website to read the content. It can happen that other websites are ranked above but when a user sees a custom highlight, its obvious that the click through rate will increase.

How Google Finds the Author of an article?

Here are some questions to ask.

1. How does Google finds who has written a specific piece? Do they have a separate algorithm?
2. Do they read something like “Written by Author” on the page or on the domain?
3. Do I have to tell Google that I am the author of this page, whenever I publish a new blog post or upload a new page to my site?
4. Does Google consider social signals from Twitter and Facebook to determine the person who has written a specific content in question?

The answer to all the above questions is NO.

In order to make sure that your author thumbnail image is shown on search result pages whenever a page on your site ranks for some keyword, you have to make some changes to your site’s code. You have to implement support for the rel=”author” tag and asynchronously tell Google that you have written this piece.

Here is how you do it.

Implementing Authorship Markup in WordPress

Adding support for authorship markup in your site’s theme is a three fold process.

1. Create an author page on your site and link to your Google profile from this author page
2. Create a Google profile and link this to your author page on your website
3. Add the rel=”author” tag on all the pages of your site to ensure that Googlebot scans the rel=”author” tag and finds the author of the blog post.

Here is the pictorial representation of how you should add support for authorship markup in a WordPress blog and how you should use the rel=”author” tag on different pages of your site:

Here are the steps that needs to be done (instructions for self hosted WordPress blogs but the core technique holds true for other content management systems as well)

Important: If your site is on a free blogging platform where you don’t have enough permissions to modify the source code or HTML template, use URL parameters for authorship markup. This is ideally suited for sites on Tumblr, Posterous, Google Sites etc.

1. Create a dedicated author page (example) on your site for every author who contributes content on your blog. WordPress automatically creates an author page for every author at http://www.domain.com/author/name but this is not very useful and cannot be customized that easily. Instead you should create a new page and ask the author to add information about himself, links to his website, social profiles and so on. The more genuine and trustworthy you make it, the better.

2. Create a Google profile and add your site’s home page as well as the above author page in the links section. Be sure to choose the option “This page is specifically about me” and the Google profile’s search visibility should be “public”

3. Fall back to the author page of your website and add a link to your Google profile. Be sure to add the rel=”me” attribute to the Google profile link.

Precisely, the code should be something like this:

Note: If you have a Google Plus account, the URL http://profiles.google.com will automatically redirect to your Google Plus profile URL.

4. Now you have to add the proper code for authorship markup to your single post pages. The HTML output should be something like this

If you are the only author of your site, adding the above code should not be a problem. However, if you have multiple authors, you have to pull in the author URL dynamically. Here is how to do it:

5. Open your functions.php file and add the following code:

The above code performs a simple check for the name of the author and returns the corresponding author URL. You have to replace the author name set in WordPress profile of the author in question and add the URL’s respectively.

6. Once you are done with the above function, it’s time to call it in the single.php file of your theme. Add the following code:

7. Done!

Congratulations! You have successfully added rel=”author” tag in your WordPress theme and now your site supports the authorship markup that Google and other search engine supports.

Check Your Pages For Correct Authorship markup

The last step involves checking whether your site’s single post pages can be correctly parsed by Googlebot. To do this, use the rich snippets testing tool to check your structured data markup and whether Google can display it on search result pages.

Simply enter a content page of your site which has a link to your author page and hit the “Preview” button. If you have done everything correctly, you should see the verified option under extracted rich snippet data.

Advantages of Supporting AuthorShip Markup On Your Blog

While there is no guarantee that adding support for authorship markup will show author thumbnails on search result pages, this is a good way to tell search engines that you have written the content and that you are a trusted person on the subject. When Googlebot scans your site and your Google profile, it will be able to judge your authority and genuineness.

This will help you set yourself apart from spammers and scraped sites who can sometime, beat you in organic rankings. Lastly, it never hurts to create a Google friendly site, right?

Related posts:

1. Adding Authorship Markup On Your Website Using Special Anchors And URL Parameters
2. How to Subscribe to a Particular Category or Label of a Blog in WordPress and Blogger
3. Adsense Split Testing Guide For WordPress and Blogger Blogs
4. How to NoFollow The Post Author Link in WordPress
5. Optimizing the Title tags of your WordPress Blog template

A Guide On Adding Support For Authorship Markup In Your WordPress Blog originally published on Ampercent

But this universal nature of WordPress has some disadvantages.

Let’s say you run a blog where you want to show custom HTML codes for only specific posts anywhere on the template. The custom HTML codes won’t be included in the HTML source of your blog post. You want to include a widget or a new section on your blog’s sidebar or footer only for specific posts or pages of your site and this section won’t appear on the pages where you don’t want them to appear.

The following diagram should make the point more clear:

We have previously discussed how to show custom HTML codes in the middle of a WordPress loop. But note that in this case, the codes will appear outside the loop which means, you have to use custom fields outside the loop and render the code on pages you want them to appear.

Using Custom Fields for Showing HTML Codes Only On Specific Pages In WordPress

Here are the steps that needs to be followed:

1. Open the functions.php file of your theme for editing. If your theme doesn’t have a functions.php file, create one.

2. Drop the following code

3. Open the sidebar.php file of your WordPress theme and add the following code:

Note: You can change the “mycustomfield” value to any suitable name of your choice.

The above code should be added to the file where you want your customized HTML section to appear. It can be added to the sidebar.php file or to the footer or header of your site but remember to call this function only once.

4. Now go to your WordPress administration area and open the specific post for editing. Scroll down to the custom fields section and add a new custom field and it’s corresponding HTML code

Important note: You should add the custom field that is being called from the corresponding portion of your site’s theme. Note that in step 3, we are calling the custom field named “mycustomfield” so if the name of your custom field is “newsletter”, you should add the “newsletter” custom field in the specific post where you want the HTML section to appear.

5. Save the post and you are done. Now open the specific post in a new browser tab and you should see the new section or widget appear only in that specific post and not across all the pages of your site.

Implementation Example

I was experimenting with this code for showing related posts manually on specific posts. I have added this custom field hack on this post, so you can check how this actually works

You can use this method to show advertisements only on specific posts or on older pages of your site. Another good idea would be to find the high bounce pages of your site using Google Analytics and add more related and meaningful content so that your site visitors can dig deeper into your site and flip more pages.

Also remember to split test with your experiments and find which position brings the most conversions. Good luck !

Read our archive of WordPress tricks and hacks

Related posts:

1. How To Embed Custom Codes In The Middle Of A WordPress Loop
2. WordPress Tip – Find All Pages of Your Site Which Don’t Have a Meta Description or Title Tag
3. WordPress Image Attachment Pages Can Sometimes Hurt Your Site’s SEO
4. Remove Unnecessary Codes From The Head Section of Your WordPress Theme
5. How to Show Category and Tag Descriptions In WordPress Theme

Using WordPress Custom Fields to Show HTML Codes On Specific Pages Of Your Site originally published on Ampercent

If you have a blog or a website powered by WordPress content management system, you might have noticed some lines of code before the </ head> section of your website’s WordPress theme. While some of the codes are useful and have a purpose, a few of them are not.

This tutorial shows you how to remove unnecessary codes from the head section of a WordPress theme.

Let’s take a look at some example codes ne by one

WordPress supports an XML-RPC interface which is used by blogging clients like Windows Live writer, Ecto etc for publishing blog posts to your website directly from desktop. If you always use a browser to write blog posts within your WordPress administration area, the above line of code is not useful.

The wlwmanifest.xml file is used by Windows Live writer to fetch Tags and Categories of your WordPress blog on the desktop blogging client. Again, if you are not using Windows Live writer to write blog articles, this code is meaningless.

The recent version of WordPress 3.0 automatically inserts a link rel tag on the head section of your WordPress theme which points to your homepage. This is not to be confused as an SEO improvement.

Instead, some WordPress themes might use this tag for varied reasons. If your theme does not refers to this tag or makes a call, you should better remove the index page referrer from the head section of your WordPress theme.

This is another annoying piece of code which points to the first post published on your current WordPress installation. The annoying part is that WordPress automatically embeds this code on the head section of every page on your site. Again, this code does not help in SEO or better crawling of your pages.

Above pair of codes are another rel link which points to the previous and next blog entry. Serves no real purpose.

This one is added from the WordPress header hook and shows the  WordPress version installed on your site. It can be a security concern, so you should remove it as well.

This is the shortlink version of a published post on your blog, which is embedded from the WordPress header hook. Some themes are coded to use it, so before dropping this one, please double check and verify that you are not using this value anywhere on your theme.

Removing these unnecessary codes from the head section of your WordPress theme is fairly easy. Open your theme’s functons.php file and paste the following codes (be careful, take backups first).

While keeping the above codes in the head section of your theme won’t harm your site in any sense, but it’s always better to reduce overhead of HTML markup and serve only what is required. Why increase the overall size of all the pages of your site with useless machine generated stuff which serves no purpose at all?

Important note: It’s important to note that all of the above codes can be removed by editing core WordPress files (e.g wp-includes/wlmanifest.xml). But I would suggest you to use theme specific codes for two reasons. First, when you upgrade WordPress to it’s latest version, all your customized hooks will be overwritten with their default code which will bring the earlier codes back.

Second, isn’t it always easy to enable or disable stuff from a theme or a plugin when compared to editing core WordPress files, which can break existing features?

Related posts:

1. How To Embed Custom Codes In The Middle Of A WordPress Loop
2. Add QR Codes To Your Blog Posts For Easy Distribution Of Content [WordPress]
3. How to Show Category and Tag Descriptions In WordPress Theme
4. Using WordPress Custom Fields to Show HTML Codes On Specific Pages Of Your Site
5. How To Install a Mobile Theme On Your WordPress Blog, And Why You Should

Remove Unnecessary Codes From The Head Section of Your WordPress Theme originally published on Ampercent

Example: Sometimes, you may find that you correctly pasted the embed code of a video in the HTML source of a blog post in WordPress but on switching the post editor to normal mode, the video does not shows up. You revert back to the HTML view of the post and find that the video embed code has simply vanished.

This might be a bug in WordPress post editor and I haven’t found any solution to fix this problem. Sometimes, the video embed codes work, sometime they don’t.

The General Way to Add YouTube Videos Within A Blog Post In WordPress

Let’s first see what is the general way to add the embed code of a YouTube video in the HTML source of a blog post, written in self hosted WordPress CMS.

1. Go to the YouTube video page and click the “Share” button. This will show more options e.g short link, sharing links on Twitter, Facebook, HD URL and the embed code of the video, as shown below:

2. You can either grab the Iframe code of the old embed code for YouTube video. I have observed that the Iframe code may fall apart in certain situations while the old code works fine, irrespective of the WordPress Post editor problem as discussed above.

3. Copy the video source code from the YouTube page, open your blog post from WordPress administration area and switch to the HTML view by clicking “HTML” at the right corner of the post editor

4. Now paste the embed code where you want the video to appear.

You are done with the adding part, now save the draft and hit the “Preview” link to preview the page you just created. If the video does not appear in the preview mode – rest assured WordPress post editor has erased the video embed code and you have to find another simpler method which should work without any problems.

Using the oEmbed Method

This is a really quick way to add web videos to your blog posts but many bloggers are not aware of the Oembed feature.

What is oEmbed ?

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

To embed a YouTube, Vimeo or Dailymotion video using the oEmbed method, followthe simple steps mentioned below:

1. Copy the complete URL of the webpage which contains the video (remember to copy including http://)

2. Open your blog post and paste the same URL in the Visual mode and not in the HTML source, as shown in the following screenshot:

Adding YouTube Videos in WordPress Posts

3. Remember that the URL should not be linked and should appear as plain text. In short, after pasting the video URL in the post editor, select the complete URL and hit the “Unlink” button once . This will preserve the plain text version of the video URL, without actually linking to it.

4. To align the video towards left, right or in center – you can follow the same convention as that for aligning text.

When you publish the blog post containing the plain text version of the video URL, WordPress or your blogging platform (Tumblr, Posterous for example) will automatically fetch the embed source of the video and dynamically add it to the HTML source of the page.

You might want to read our other related guides on WordPress:

• How to embed Facebook videos and Photo albums in WordPress
• How to embed only the audio of a YouTube video
• Embed YouTube videos with DVD style playback controls
• Crop a YouTube video to show only the selected part

A WordPress Plugin To Customize How YouTube Videos Appear In Your Blog Posts And Pages

If you are looking for more customizations and want to edit the width and height of the YouTube video, without having to touch the embed code – install the Smart YouTube WordPress plugin. The plugin allows you to add YouTube videos in WordPress posts, coments, RSS feeds and pages.Additionally, the plugin allows you to define a custom width and height of the video (maintaining a correct aspect ratio) so your video always appears in the correct size and format.

Here is how the settings panel of the plugin looks like:

The plugin actually works with a shortcode format for embedding YouTube videos, which is really easy to remember. Give this a try !

Related posts:

1. YouTube Now Lets You Remove It’s Logo From YouTube Video Player
2. How to Embed Only the Audio Of a YouTube Video
3. Add QR Codes To Your Blog Posts For Easy Distribution Of Content [WordPress]
4. How to Embed Facebook Videos And Photo Albums In WordPress
5. 3 Ways To Crop An Embedded Youtube Video To Show A Selected Part

Problems Adding YouTube Video in WordPress Posts ? originally published on Ampercent