Adding Google Adsense™ Before Your Content

Open up the index.php file in the WordPress theme editor and locate this line of code.

<?php the_content('Read the rest of this entry &raquo;'); ?>

This calls out to your post content so right above it, add your Google Adsense code like below. By the way this location is one of the best spots for content ads!

<script type="text/javascript"><!--
google_ad_client = "pub-XXXXX";
google_ad_slot = "XXXXX";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<?php the_content('Read the rest of this entry &raquo;'); ?>

The end result of the code is an Adsense ad inserted into your post but…OH NO!!! The text does not wrap! This is where most people get frustrated and end up getting a plugin to finish the job. Don’t despair! The solution is at the end of this post.

For a more efficient Google Adsense ad unit, tight integration is recommended. Leaving a gap right next to the ad unit however, is not.

What About Putting the Ad Unit at the End of the Content?

Same goes with putting your ad at the end of your content. Just put the ad code right after the function the_content like so.

<?php the_content('Read the rest of this entry &raquo;'); ?>

<script type="text/javascript"><!--
google_ad_client = "pub-XXXXX";
google_ad_slot = "XXXXX";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Wrapping the Ad Unit with Your Lovely Content

So how do we make it wrap? That’s easy. Just wrap the code with a div with the CSS float:left;. Here’s the finished code. Notice that I added a div called googleads to the code along with the complimenting CSS.

<div id="googleads">
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXX";
google_ad_slot = "XXXXX";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<?php the_content('Read the rest of this entry &raquo;'); ?>

#googleads {
        width: 336px;
        padding: 0px;
        margin: 25px 10px 0px 0px;
        float: left;
}

An alternative without adding any extra CSS would be something like this.

<span style="width: 336px;padding: 0px;margin: 25px 10px 0px 0px;float: left;>
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXX";
google_ad_slot = "XXXXX";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</span>

<?php the_content('Read the rest of this entry &raquo;'); ?>

The end result.

Having the content wrapped around the ad unit makes for a higher clickthrough rate especially for text only ads.

That’s it! Happy coding!

Advantages Of Going Mobile-Friendly

Faster loading time

You wouldn’t want your readers to wait for almost a whole minute for their Opera Mini browser to load your full homepage. No one likes to wait that long for content. Unless your WordPress site is used to serve high quality graphics, then I suggest you go mobile friendly today. Forget that, do it NOW!

The Traditional Way

If you have noticed many sites have added their share of the mobile domain and it is more commonly seen as m.yoursite.com. They would have to edit their .htaccess file and order a re-route to send the reader to the m.yoursite.com site if the user agent of a mobile web browser is detected. Prior to that the site owners would have to re-design their site and streamline it for mobile content. Would you want to do ALL that?

Your Available Options

As a WordPress user, you would be pleased to know that there is a plugin – in fact two! – that can be used to instantly make your WordPress site mobile friendly. Both versions come free and also there is an option to go pro with a small fee.

WordPress Mobile Edition

The first is WordPress Mobile Edition by Alex King which is built based on the Carrington theme. Simple and direct, it has minimalistic design and features, delivering content in its gist.

WPtouch iPhone Theme

Your second option would be the WPtouch iPhone Theme by BraveNewCode. The WPtouch iPhone Theme is designed specifically with the iPhone in mind so needless to say your site will look fantastic on an iPhone.

Which Should You Pick?

Well I don’t have an iPhone to perform any comparisons but this is what I can show you from my Nokia 5800 Xpress Music.

Screenshot of ahyen.com on WordPress Mobile Edition

Screenshot of ahyen.com on WPtouch iPhone Theme

Sorry for not going full screen on the WPtouch iPhone Theme but you can see for yourself that the WordPress Mobile Edition has much better rendering of the page than WPtouch. I’ll try to get more screenshots on different phones for more comparison. If you are using a mobile phone other than the Nokia 5800 Express Music, do me a favor and send me a screenshot of my site.

The WordPress Mobile Edition plugin gives you better rendering and caters for a wider audience. Having a simplified interface gives less room for error.

The WPtouch iPhone Theme plugin on the other hand is better eye candy when viewed through an iPhone because it is designed to work with the iPhone. This means that other mobile readers will have sub-par surfing experience at your site.

Verdict

If you really want to cater for the masses then go ahead and install the WordPress Mobile Edition plugin as it will give you less rendering problems. But then again most of the Internet savvy and fast moving generation opt for the iPhone as their preferred mobile device when surfing the web on the go. Hmm…

Generally uninstalling the plugin or WordPress and reinstalling them would solve the problem but what if you did all that and you still have the error? This would mean that your readers will not be able to access your content through your feeds be it RSS or E-mail so this is how to solve it.

Open up the file feed-rss2.php in your wp-includes folder and look for the code below.

header('Content-Type: text/xml; charset=' . get_option('blog_charset'), true);
$more = 1;

Immediately after this code, paste this lump of code after.

$out = ob_get_contents();
$out = str_replace(array('\n', '\r', '\t', ' '), '', $input);
ob_end_clean();

Then save this file and apply the same to the other feed files which you use i.e. feed-rss2-comments.php, feed-rss.php, feed-rdf.php, feed-atom.php, feed-atom-comments.php.That should solve your white spaces problems.

Preventive Steps

Here’s a few tips on preventing this incident from happening in the first place.

1 – Install WordPress properly by following all the steps.

Yes you should follow each and every step when you install WordPress or their plugins for that matter. Following the WordPress upgrade guidelines will ensure that you have a clean transition over to the newer versions of WordPress and plugins.

2 – Use a text editor which can remove the Byte Order Mark (BOM) from your files whenever you edit your files.

Downloading your files and editing them in the Windows Notepad program will introduce a BOM into your files and will return errors when validating your site or feed. Use software like Notepad++ to edit your files if you downloaded them and plan to edit them using Notepad.

3 – Check for validation regularly

Anytime you introduce something new, go get your site validated. It is a healthy practice to regularly check your site with the W3C Markup Validator and your feed with the W3C Feed Validation Service to detect errors in your page. This will make sure you get to the problem first before your readers do.

Reference: w3it.org

Advantages Of Using WordPress Plugins

1. WordPress plugins enhances content

Plugins like Thumbnails for Excerpt does what it says, adds thumbnails to your excerpts by calling to the first image in the post. WP-Syntax enables developers to publish codes on their sites with pretty highlights and scroll bars. Simple Pull Quote lets you create pull quotes from your main body text and display it where ever you prefer. All these plugins enhances the content on your blog if you know how to use them wisely.

2. WordPress plugins enables Search Engine Optimization

Every blogger out there wants their stuff to come up first in Google or Yahoo searches. Installing plugins like All-in-one SEO, Google XML Sitemaps and Yoast Breadcrumbs provides your blog with the basic requirements for Google and Yahoo to crawl, index and rank your blog with others in the same category.

3. WordPress plugins extends features

Whether you want to host a competition or setup an e-commerce site, WordPress plugins can do that with a click of the Activate button. Plugins like WP e-Commerce provides a shopping cart application for your customers to pick stuff off your shelf and purchase them on your site, instantly transforming your site from a money-pit to an instant cash flow generator.

4. WordPress plugins introduces connectivity

There are vast plugins in the WordPress database which provide connectivity to Twitter, Facebook and many other social networking sites. Mobile plugins like WPtouch enables your site to be connected to the world of mobile Internet. These plugins serve as an extension arm to increase your site’s reach, promote your site and expand your reader base.

5. WordPress plugins reduces development time

The real power of WordPress plugins is to add in all of the above functions without having you to painstakingly hard-code them into your blog. All you have to do is download the plugin, install and activate it. Its that simple and just takes a few seconds. Thats the beauty of WordPress and its plugins. No hassle, no mess and you get a feature-rich world-class WordPress blog.

Disadvantages Of Using WordPress Plugins

1. WordPress plugins increases page load time

Plugins with rich images like SexyBookmarks and comments plugins which pull information from a separate database like IntenseDebate Comments slows down your page. According to the latest Google ranking standards, a page which takes longer to load will be ranked lower than one which loads faster.

2. WordPress plugins promotes other brands which are not yours

Some of the more popular free plugins come together with automatic branding. You install the plugin activate it and smile with glee as your page loads, only to find an annoying colored logo messing up your theme. There are some plugins who give you the option of not showing their logo i.e. Yet Another Related Post Plugin but what about those who don’t? Well you get what you pay for and if you didn’t pay for anything, I guess you’ll just have to promote then.

3. WordPress plugins introduce security issues

You cannot guarantee what that plugin you have just installed contains. Yes it gets the job done but you cannot be sure if you have just installed a Trojan or a backdoor malware into your WordPress blog. You can feel safe about the more popular plugins but what about those which are not? By clicking Activate your are indirectly signing away the security of your WordPress blog.

4. WordPress Plugins introduce compatibility issues

Did you notice that WordPress always urge you to backup your database every time you install a new plugin? Have you experienced a newly installed plugin messing up all your themes with you having to retweak them? Sometimes a new upgrade to an existing plugin will not function properly causing downtime. I personally have experienced new plugins creating problems in my feeds. Now there is even a tool at the plugin installation window which tests the compatibility of the plugin before you choose to download it. New features = new problems especially if the feature is not introduced by WordPress themselves.

Verdict

Plugins should be used sparingly and with caution. If you can do without them by all means go ahead but if you don’t have a choice then make sure you read up on the plugin and the reviews from other users.

So what is it gonna be? Will you use plugins on your WordPress blog? Or would you hard-code all the features you want into your blog yourself? The choice is yours. As for me I’m gonna make do with plugins until I can figure out the coding myself

Tools You Will Need

• One PC or laptop connected to the Internet
• One WordPress blog which needs expansion
• One strong will to face frustration if the code does not work

Adding The Files

1 –  Open up your functions.php and locate the string with the code looking like this

if (function_exists('register_sidebar')) {
          register_sidebar(array('name' => 'Sidebar'));
}

2 – Add this code to the string

if (get_option('uwc_site_sidebars') == '2') {
          register_sidebar(array('name' => 'Sidebar Two'));

and it should looks like this.

if (function_exists('register_sidebar')) {
          register_sidebar(array('name' => 'Sidebar One'));
if (get_option('uwc_site_sidebars') == '2') {
          register_sidebar(array('name' => 'Sidebar Two'));
}

3 – Create a file sidebar2.php and paste the following code, save the file and upload the sidebar2.php to your WordPress themes folder.

< ?php /* Widgetized sidebar */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Two') ) :else: ?>
< ?php wp_list_pages(); ?>
< ?php endif; ?>

Adding The Styles

Now if you apply the changes you probably would see the new sidebar appearing in your Widgets menu. Drag some widgets into it and preview your site. The new sidebar should appear now somewhere on your site but with no styles.

Go to your stylesheet.css file and look for your sidebar style. As for me it was #sidebar. You can use the Google Chrome Inspect Element function to help you locate the name of the style.  If you noticed in the sidebar2.php file you created, in Line 2 the style for the second sidebar sidebartwo was declared. In your stylesheet.css add , #sidebartwo to all your sidebar styles.

#sidebar, #sidebartwo {
        background:#fff;
        color:#242424;
        padding: 0px 5px 5px 12px;
        float: left;
        width: 170px;
        margin-right: 5px;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size:12px;
}

#sidebar a, #sidebartwo a  {
        text-decoration: none;
        color: #242424;
        font-weight: normal;
        font-size: 12px;
        padding-left: 0px;
}

If you want different styles for each sidebar, then separate the styles and declare them individually.

Done!

What is left to do now is to tweak the sidebar styles until you are happy with it I’ll leave you with snapshots of my site before and after adding an additional sidebar and I hope your site will turn out good as mine did.

Good luck!
[nggallery id=1]

The Top 10 Free Must-Have Basic WordPress Plugins

Akismet

Now this is a no-brainer and it comes installed as default with your WordPress installer. All you have to do is to activate Akismet, key in your WordPress.com API key and you shall be spam-free for the rest of your blogging days. Trust me, no one likes to read spammy comments. Download

FeedBurner FeedSmith

Feeds are an integral part of blogging as some of your readers would prefer to get updates about your site via e-mail or through a feed reader. This plugin here will handle all your feeds and divert it to FeedBurner, which is the best feed delivery system on the Internet. Rest assured that your readers will now get the latest up to date information about your WordPress blog! Download

Google Analytics For WordPress

Forget about WP-Stats. You need real, world-class analytics and Google Analytics is the way to go. Google Analytics is the best free analytics you can get on the market plus its demographics are highly configurable. Whether you like pie-charts, trend charts or bar charts Google Analytics can do it all and the key to integrating your WordPress blog with it is through this plugin. Download

Google XML Sitemaps

In order for Google or any search engine to index your website, you must have a sitemap configured. Although you can probably create your very own sitemap manually, you probably wouldn’t want to do that for every single blog post or article you publish. The Google XML Sitemaps plugin updates your sitemap automatically every time a new post is published and also notifies all major search engines! Download

IntenseDebate Comments

The Comments section is where you engage your readers and create interactivity between the author and the reader. Therefore it is important to format this section properly and make it as user-friendly and as easy to read as possible. I’ve tried to give my Comments section a clean look but when I found out about IntenseDebate for WordPress, I installed it instantly. IntenseDebate looks professional and it’s layout can be customized according to your preference. Comment rating and management is a breeze with this plugin so why do it yourself? Leave it to the pros! Download

SexyBookmarks

With the increase of social media sites on the Internet, your blog’s potential greatly expands. Sharing your blog on these networks quickly become a tedious task as your readers have to copy and paste the URLs into social media sites like Twitter, Facebook and Digg. With plugins like SexyBookmarks, it is now a breeze and it looks great! Download

Theme Tester

Theme Tester is a plugin which hides all the CSS customization you are changing once you activate it. It saves your readers from wondering what is happening to the blog when it looks different every other second. However this plugin only pauses the stylesheet of your blog. Any changes you make to the widgets, sidebars or contents are still visible so use with care Download

TweetMeme Retweet Button

You should be wondering why I included this into my list by now. Yeah the TweetMeme Retweet Button is currently one of the most popular bookmarking tools and it looks good too! TweetMeme also offers link tracking so you could see who tweeted your post and also how many retweets have been made! Choose between the standard or the mini version and add configure it with your Twitter account name and you are ready to go! Download

WordPress Mobile Edition

I chose WordPress Mobile Edition over WPtouch because it is not just specialized for high-end touch screen devices namely the iPhone, Blackberry and Android. I have experienced WPtouch looking terrible on my Nokia 5800 Xpress Music but WordPress Mobile Edition looks just the same on any platform. No doubt WPtouch looks smashing but which one do you want? Your site to look good or more compatibility with other mobile devices? Your choice. Download

WordPress Related Posts

This plugin allows you to add related posts to your current post and at the same time increase the clickthrough rating on your site. It is as simple plugin and works almost flawlessly. You can change the code to adapt it to your site theme as you like. What I like about this plugin is that it is simple and suited for those who have a clean theme. Just install it and plug the PHP string into your template and you are done! Download

Express Some Gratitude

As you know these plugins are free of charge and the developer are only human. They designed these plugins in their free time (hmm some might depend on it to make a living) so if you feel like it do donate or at the very least promote their plugins so other would donate too. With your support these developers would then be able to continue improving their plugins and provide their best support to you.

]]> http://wphacks.ahyen.com/top-10-free-must-have-basic-wordpress-plugins-that-you-should-really-install/feed/ 0