Plugins

There are a few critical plugins that every good WordPress blog should have. The first one is the Google sitemaps plugin. Install the plugin then head to Settings > XML-sitemap and run the plugin. It will automatically generate a sitemap and submit it to Google for you. This will help your search ranking as your new blog grows. It works in the background and you can leave it be after creating your sitemap.

The next plugin I install is the All in one SEO plugin. I’ve tried a couple SEO plugins, but this one is by far the best. Once you install it, head over to Settings > All in One SEO to activate it. There are a number of options you can pick from to configure you plugin. It’s a good idea to leave most of them as is. However, I prefer to check off the option that automatically converts any post tags to meta keywords. To use the plugin, start a new post and scroll down to the bottom. You’ll see some fields there that you need to fill in: one for a title, and one for a description. I usually copy my post title into the title field. Then I enter a good description about the post content. Make sure you do that on every one of your blog posts.

Another useful plugin I’d recommend installing is maintenance mode. This plugin allows you to throw up a splash page if you are, for example, working on your theme and you want to hide your blog from the public.

The next plugin I install on every new blog is the WordPress database backup. Believe me, this is very handy if your database becomes corrupted down the road, or you need to recover your posts for another reason. Install the plugin and head to Tools > Backup. Once you’re there, configure the plugin to email you a backup once a week. Then just keep your backup files somewhere safe, incase you need them.

The last plugin I recommend activating is Akismet. This plugin comes bundles with WordPress, so you simply have to activate it. You’ll have to get an API key from the Akismet website, and if you say your blog is for personal use, you can get one for free. I highly recommend using this plugin to filter out spam comments. I had a client recently launch a blog I designed for them. They didn’t activate the plugin and after a month they had over 1,000 spam comments which brought their blog to screeching halt! Not to mention the poor person who had to go through and delete them all. You’ve been warned! :)

If you’re planning on offering free downloads from your blog, I’d recommend signing up for a free CloudApp account. It’s not a plugin but it’s quite handy for hosting files, and it gives you a simple way to offer downloads to your readers. It also includes a count of how many times each file is downloaded which is handy. That’s about it for plugins that I would recommend installing for all new WordPress blogs. What do you think? Do you use any other plugins that are a must for your WordPress blog?

$400 in files for only $20! | Buy Now

What’s Included?

Here’s a list of everything included in the bundle:

ThemeForest.net Files
WordPress Themes, Website Templates, Photoshop Templates

• OPEN WordPress Portfolio Theme
• 96 Display Website Template
• BrandMedia Modern Photoshop Template
• Graphic Designer Email Newsletter Template
• DesignerWannabe Magazine Website Template

CodeCanyon.net Files
Javascript, PHP, Plugins, .NET, CSS

• AviaSlider – jQuery Slideshow
• CSS Griddler Pricing Grid
• Twitter Widget Pro for WordPress
• AJAX Contact Form
• Simple PHP User Counter
• jSocial Sharing Widget

GraphicRiver.net Files
Graphics, Templates, Textures, Backgrounds, Vectors, Icons, Fonts

• 8 Grunge Backgrounds
• Stylish Mosaic Backgrounds
• 6 Photoshop Actions
• Tileable Leather Texture
• Sexy Vector Laptop
• Flyer/Postcard Template
• Shiny Bubble Backgrounds
• Lead True Type 1.0
• Badges & Sale Tags
• Old TV Stock Image
• Solar Pricing Table
• Creative Pro Business Card Pack
• Light Bubbles PowerPoint Template
• The Newspaper Front Page Design Template
• Smart Photo Strip
• 21 Web Icon Set

$400 in files for only $20! | Buy Now

VideoHive.Net Files
Video Project Files, Motion Graphics, Stock Footage

• Reveal Transition
• The Elegant Spin HD
• 3D Identity
• The Shatter
• Sketch
• Incubus Logo CS3
• Onyx Logo

3DOcean.net Files
3D Models, Textures, 2D Concepts

• High Armchair
• HDRi – 1325 Sun Clouds
• Game-Ready AWP Sniper Rifle

ActiveDen.net Files
Flash Files

• 36 Coming Soon, Countdown Clock Template
• Photoshoot Creative Template
• The Archer WordPress Video Player
• Digital Boxes Preloader
• Unity3D Starter Pack

AudioJungle.net Files
Music & Sound Files

• One Fine Day
• Driving Far, Far Away
• Dreaming
• Space Battle Number Four
• Smoke Orchestra
• Space Sequence

Net.Tutplus.com
Premium Tutorials

• Coding a Complex Design into CSS and HTML
• Combine Hand-drawn Art with Photoshop
• How to Blend Images Together Using Adjustment Layers
• Ultimate Type Twisting with Adobe Illustrator

Extras

On top of all those files, there are a couple additional extras thrown in:

• $50 voucher for MediaTemple.net.
• $10 voucher for RockablePress.com

$400 in files for only $20! | Buy Now

Facebook Like Button Plugin | Download The Plugin

Further Instructions

Simply download the plugin and install it on your server. Activate it from the WordPress Admin, then configure it under the Settings tab. If you have any questions on how to configure the plugin, please leave a comment.

View Demo

What you’ll need

Download the jquery source files from github.com. Once you’ve downloaded the javascript file (jquery.newsticker.pack.js), upload it to your server. For the purposes of this demo, let’s just upload the file to your root folder and keep everyting in the same directory. Also, if you don’t have jquery on your server, you’ll need to download it from jquery.com. Once you download the file, rename it it jquery.js and place it in your root directory.

Setting up the HTML

Once you’ve uploaded your files, let’s create a new HTML file called index.html. Inside that file, paste the following code into the <head> of your file:

<html>
<head>
 <title>ticker</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.newsticker.pack.js"></script>
 <script type="text/javascript">
    $(document).ready(function() {
      $("#news").newsticker();
    });
  </script>
</head>

Now head down to the <body> of your file and insert the following code:

<body>
<div id="ticker">
<ul id="news">
 <li>News item 1</li>
 <li class="loud">News item 2</li>
 <li>News item 3</li>
</ul>
</div>
</body>
</html>

HTML explained

These are the main points to keep in mind with the HTML:

• The wrapping <div id="ticker"> can be used if you’d like to give your ticker a background, margin, dimensions. The ticker will still work without this <div>, but you’ll most likely want to leave it in for layout reasons.
• Each <li></li> refers to one news item. Within the <li></li> you can add text, links, etc… They’ll appear in the order you enter them, and you can have as many as you like. The one I setup for recork.org uses 23 different lines.
• Once the last item on the list is displayed, it will loop around and start over with the first item.

Adding the CSS

There are a number of ways you can choose to style your ticker. I’ve setup a few basic layout styles here, but please feel free to play around with it. I’m going to keep it simple and do all my backgrounds with css. You might want to try using an image for a background, or perhaps add an icon to the left of your ticker. Also, make sure you paste this code into the <head> of ticker.html, after the javascript links.

<style type="text/css">
#ticker {
 background-color: #ebebeb;
 border: 1px solid #ccc;
 padding: 20px;
}

ul#news {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul#news li {
 margin: 0;
}

ul#news li.loud {
 font-weight: bold;
}
</style>

CSS explained

I’ve tried to keep the CSS here pretty simple. Here’s a few notes on what I’ve got going on:

• #ticker is the wrapper for the ticker which has a grey background, grey border and is padded 20 pixels.
• ul#news is the unordered list for the ticker. You’ll want to leave those styles as they are, so there is no unwanted margin or bullet points. If you want bullet points, simply change up the list-style: selector to a different value.
• ul#news li are the styles for each individual bullet point. You might want to add some color, or other font styles here.
• ul#news li.loud is a class I setup for news items that you want to stand out more. Adding the class loud to your <li> will currently make that item bold.

Summary

Once you have all your code setup in index.html, upload the file to your root directory. At this point, it would also be a good idea to move the CSS to your external stylesheet. I wanted to keep this tutorial straight forward, for beginners, so I left everything in one HTML file. That’s it. I’ve shown you how to put together an animated news ticker with a little bit of jquery and CSS. If you have any questions about customizing the ticker further, please feel free to leave them in the comments. Once again, I’d like to thank textotela.co.uk for designing a great plugin. The source files for this tutorial are available from the link below.

Download Source Files