Upgrade Your WordPress Plugins

If you’re like me, you probably don’t check your plugin page very often.  Aside from activating something new you’ve uploaded, there’s really no reason.  The problem, however, is that your forget to update your plugins.  After taking a look at my page the other day, I found several notifications like this:

upgrad_wordpress_plugins

Yikes. That sounds urgent. Just like upgrading your WordPress installation, upgrading plugins is very important. New versions often fix security issues, known bugs, usability, etc. Be sure to backup your installation and deactivate the selected plugin before performing major upgrades – the last thing you want is a PHP error that makes your blog inaccessible.

If you’ll be spending a few minutes upgrading multiple plugins, you might want to install Maintenance Mode – a cool little plugin that shows a message to visitors that your blog is being worked on and will be up shortly.

Speed Up WordPress Blogging with HTML

If you’re familiar with WordPress, chances are you know there are two options when writing posts – Visual and HTML. Using the Visual editor gives you more options for look and feel – alignment, colors, spell-check, etc. HTML is a very basic editor and only allows a few HTML shortcut buttons – bold, link, etc.

While using the Visual editor will allow you to use more of a WYSIWYG interface, learning a few HTML tags can save you quite a bit of time, allow you exact customization that Visual sometimes can’t offer, and speed up your input text.

Learning a few tags can make blogging quicker. For example, when you want to insert a link while in Visual editor, you must click a button, then wait for a Lightbox window to open up, giving you input text options for link address, name, etc. It also allows you to choose if your link opens in the same window or new tab/window. The problem comes when you have 10 links in one post. Opening the menu and filling out these options can take a long time. Why not instead, just learn to insert a link with HTML?

<a href="http://www.example.com" target="_blank">Example Link</a>

Example Link

Adding the target="_blank" forces the link to be opened in a new window. See how much quicker that is?

Here are a few more simple HTML tags for WordPress blogging:

Blockquote

<blockquote></blockquote>

So, since each of these HTML tags are already in blockquotes, this looks a bit odd. Hopefully you get the point.

Inserting Images

<img src="http://rybomedia.com/marly.jpg" />

Unordered List

<ul>Item One</ul><ul>Item Two</ul>

    Item One
    Item Two

Ordered List

<ol>Item One</ol><ol>Item Two</ol>

    Item One
    Item Two

List Items

<li>Item One</li><li>Item Two</li>

  • Item One
  • Item Two
  • Heading 1

    <h1>Heading 1</h1>

    Heading 1

    Bold

    <b>This is bold text!</b>

    This is bold text!

    Italic

    <i>This is italicized text!</i>

    This is italicized text!

    Alignment

    <p align="center">Center Text</p>

    Center Text

    <p align="left">Left Text</p>

    Left Text

    <p align="right">Right Text</p>

    Right Text

    <p align="justify">lots of texts</p>

    Justified Text – You can’t really tell that it’s justified unless it extends to the edges of the post box. Hopefully me explaining this will have caused it to! Note – you will also have to have text that is multiple lines so that you can tell it’s all the same length.

    Now all of that is pretty straight forward. However, it can come in really handy if you’re getting frustrated wit the Visual editor. Like any GUI-type interface, it is often easier and more efficient to type in the “basic code”. It’s sometimes easier to wrap <p align="center"></p> around the exact text you want than to try and highlight, then select menu items – especially when working with images and other media.

    For some reason, typing in the HTML box is faster than the Visual box. I’m not exactly sure why, but I’ve noticed this on several occasions. If you don’t need all the bells and whistles while you type, switch over to HTML for lighter blogging.

    Easy On the Eyes – The 7 Deadly Post Sins

    As you may well know, good content is the key to successful web logging. Got that? Ok, now it’s time to make it readable. After all, what’s great content if it’s hidden beneath not-so-transparent layers of garbage?

    One of the distinguishing factors between good and great blogs is the readability factor. Here are some tips I’ve come up with to help push your site to that next level.

    Letter Spacing

      Adding a little extra space between your letters is one of the easiest things to do – and it’s one of the best ways to make your posts more readable. Too often, sites leave the default spacing on letters. This, combined with smaller font sizes and serif fonts, leaves readers squinting to make out the difference between “rn” and “m”.

    Line Spacing

      Along the same lines (ha! how appropriate) as letter spacing, line spacing allows you to open up your content and let it breathe. This adds just a touch of whitespace in your actual post, which can make your page feel cleaner.

    Break Up Those Paragraphs!!!

      Nothing is worse than going to a blog where the author has neglected to break up content into paragraphs. Nothing. This is why newspapers have columns filled with blocks of text – often spread across multiple pages. Here’s a secret – people don’t want to read a lot, but they will keep reading if “a lot” is split up into more manageable chunks. I mean, seriously – you know what I’m talking about, right? Blogs where authors ramble on about nothing in particular, while not once hitting the “enter” key? Blogs that go on and on and on and on and on about personal stories, detailing every single bad thing that happened to them, using run on sentences, improper grahmerr and lots and lots exclamation marks!!!  Honestly, relationships are tough, but that doesn’t mean that I need to go to your page and read about them.  I don’t have time to spend reading your life story, about how he dumped you and you cried, then you dumped him and he cried.  I honestly don’t even care that you both then later dumped each other and cried together – I have things to do.

      See what I mean? I hope I’ve taught you a lesson, and that you’ll never commit this atrocity against a poor, unsuspecting reader.

    Use Decent Grammar

      I’m not a great writer. I’ll be the first to admit that. My old English and Rhetoric teacher, J.P. Stephens will be the second and my old British Literature teacher will be the third. Either way, most of the time I am able to use somewhat decent grammar.

      Using decent grammar isn’t difficult. Basically, it goes something like this. If you’re unsure whether or not to use caps on something other than a proper name or the first letter of a sentence – DON’T DO IT. If you aren’t sure whether to add a fifth exclamation mark to your sentence – don’t do it!!!!! If you’re tempted to use some sort of abbreviation in your writing – omg, please don’t do it.

    Use That a:hover Carefully, Mister

      Never ever make the text size in your link hover class bigger than a normal link. When someone hovers over a link on your site, be it text or an image, nothing on the page should move up or down.

      Great hover effects make the user mouse over your link again, just to see it. Nobody will admit they do this, but they do. Hover effects should add to the flow and balance of your page, just like your content, images, and colors.

    Be Consistent

      This is by far the area in which I struggle the most. Pick something and stay with it. Readers want consistency (unless it’s consistently bad), and well designed, easy to read posts will keep them coming back.

    Think About Where Your Blog is Being Read

      If you’re serious about blogging (and even if you aren’t), chances are you have an RSS feed, which means that not everyone is reading your blog on your website. Different readers can render content differently, so it’s important to keep in mind how some of the more popular RSS readers may format your posts.

    And that’s it for now. Now, keep in mind, I am by no means in a position to give instruction to bloggers, as I am not successful by any stretch of the imagination. However, from observation and personal experience, these have been some of the most helpful and effective ways to make your posts more readable.

    Embed RSS Feeds in WordPress

    WordPress makes it easy (well, kind of) to embed RSS feeds into your WordPress template, so you can have a feed displayed in your sidebar, footer, or anywhere else you want in your PHP files. To do this, I used a combination of code from Darren Hoyt and Jeriko.

    first, from Darren

    <?php
    require_once (ABSPATH . WPINC . '/rss.php');
    $rss = @fetch_rss('RSS FEED HERE');
    if ( isset($rss->items) && 0 != count($rss->items) ) {
    ?>
    <ul>
    <?php
    $rss->items = array_slice($rss->items, 0, NUMBER OF ITEMS);
    foreach ($rss->items as $item ) {
    ?>
    <li>

    and then the bit from Jeriko

    <a href='<?php echo wp_filter_kses($item['link']); ?>'>
      <?php echo wp_specialchars($item['title']); ?>
    
    </a>
    </li>
    <?php } ?>
    </ul>
    <?php } ?>

    It’s All About the Icons

    icons

    We live in a visual world.  From ads you see on billboards to french fry containers to web graphics, everything is driven by visual aids.  A picture can say a lot with one glance that text can’t.  Colors, design, and placement convey feeling, mood, and ideas.  It’s evident everywhere we go, whether it’s to McDonalds or a parking lot – images and icons play a big role in conveying a message.  Small wonder that this has taken over the technology world, too.

    For me, at least, icons are present in everything I do on the computer.  As my earlier post showed, I organize my Firefox toolbar by favicons, saving space and relying on complete visual recognition.  This means, however, that all my favorite sites had better have a nice looking favicon.  It better be a transparent one, too.

    RIM has made icons its focus in their Blackberry phones.  The entire device is organized and sorted by colorful icons.  It’s almost what makes a Blackberry a Blackberry.  Apple, too, has adopted this idea and sorted each application in it’s popular iPhone by a square icon.

    The beauty of icons is that they are small, consistent, and eye-catching.  Nobody wants to stare at text links all day – they want an image.  Let’s face it – Google wouldn’t quite be the same company if it weren’t for their simple but colorful logos and favicons.  Twitter wouldn’t feel so comfortable.  RSS wouldn’t have the immediate recognition.

    Here are a few tips to creating a friendlier impression for your site.

    • Make sure you have a consistent logo, and that it’s on EVERY page
    • Add a favicon.
    • Use instantly recognizable images for widely-used service (RSS, Twitter, etc)
    • Use colors that go well together.  Your site will do better if people want to look at it.
    • Use, but don’t overuse, image rollovers and effects.
    • That said, try and keep it in CSS, HTML, or JavaScript.  Remember, there are older browsers and slow internet.
    • Try and compress your images sizes as much as you can without losing quality so that they will load faster.  When people come to your site, BAM – there’s your logo.
    • Remove white space from your code and deactivate unused plugins – it’ll increase the load time of your page.
    • Don’t forget the KISS rule – Keep It Simple, Stupid.

    Install WordPress on Your Desktop!

    Thanks to a recent post by DesiznTech, I have learned that you can actually install WordPress (and a few other CMS) locally, on your desktop! For me, at least, this is an answer to prayer. As a web designer by hobby, having a local way to make changes and design without affecting a live site is great. Before now, I installed WordPress in a separate folder on my account to use as a “sandbox”.

    To clarify, I haven’t actually done this yet. Personal situations and upcoming exams have drained me of time and energy, so I haven’t had a chance to try this out. However, I plan to do this as soon as I’m able, and I would encourage you to give it a try. If you do, let me know what you think!

    Here is the WAMP Server, which you will need to install PHP, Apache, and MySQL on your desktop, and Jeff Chandler’s tutorial on how to actually install the software.

    New site, new theme, same great taste. Well, new great taste.

    I’ve decided to go ahead and announce my new site, ryanlbowen.com.  As you know, the big thing nowadays is to own the domain of your name.  I bought this a while ago, but only recently have decided to do anything with it.

    Basically, the site will serve as my personal portfolio, link base, and picture gallery.  Or anything else I want it to be, because as is the beauty of personal property, I can do with it what I please.  I designed the site myself, and though I like the basic structure now, it is a work in process.  I want to get some screenshots of other sites I’ve worked on as soon as I can, but school is coming down to the wire and I need to study more.

    screenshot-ryan-l-bowen-mozilla-firefox

    Add Author Image (Gravatar) to Posts

    You may have noticed that I have added an author image each post.  This was done for two reasons:  I like the personal effect and I now have multiple authors.

    It’s really quite simple to add the author picture if you’re using WordPress gravatars (which you probably are, even if you don’t know it – I didn’t!).  First, go to Gravatar.com and log in with your WordPress email address and password.  You may have to set up an account if you’ve never been before.  However, you should have a picture.  If you don’t, upload one now.

    Now, simply add the code below into one of your templates to get a picture by your posts.  Try making a new <div> in you stylesheet to put this in, say “authorimage”.

    <?php echo get_avatar( get_the_author_email(), '50' ); ?>

    Since gravatars are squares, the number in the single quotes (in this case, 50) is the number of pixels of how big your image will be. Replace this to fit your page.

    Remove Bullets from WordPress List

    I have been having trouble removing the [tag]bullets[/tag] from both [tag]ul[/tag] and [tag]li[/tag] [tag]lists[/tag] while working on my new site. Even though I have all list styles set to “none”, I still get [tag]bullets[/tag], which also indents my content, leaving it off-center.

    There is actually a very easy fix to this. Basically, just turn off all bullets at the top of your [tag]stylesheet[/tag]. Do this by placing the following code somewhere in your stylesheet (I prefer to put it right at the top so I remember it’s there).

    ul li {list-style-type: none;}

    That’s it! Now you should be bullet-free and right on center.

    Add “All Posts” Archive Page to WordPress Blog

    For a while now, I’ve been looking for a way to list all my [tag]posts[/tag] on one page, since I don’t see the point of monthly archives and I think it would be neat to have a quick reference to all previous posts. I have been unsuccessful in my search attempts until last night, when I stumbled onto the solution accidentally.

    I finally found the [tag]code[/tag] on [tag]WPRecipes[/tag]. However, the code on the site is unformatted, so I’ll jazz it up a little bit so that it will fit your [tag]WordPress[/tag] [tag]theme[/tag].

    To do this, you’ll want to create a [tag]page template[/tag] called “All Posts”. Open up notepad (or some text editor) and paste the following.

    <?php get_header(); ?>

    <div id="contentcontainer">

    <div id="left">

    <?php
    $debut = 0;
    ?>
    <?php while(have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <ul>
    <?php
    $myposts = get_posts('numberposts=-1&offset=$debut');
    foreach($myposts as $post) :
    ?>
    <li><?php the_time('d/m/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endforeach; ?>
    </ul>
    <?php endwhile; ?>

    </div><!--end:left-->

    <?php get_sidebar(); ?>

    </div><!--end:contentcontainer-->

    <?php get_footer(); ?>

    Save this as “allposts.php” (or something similar) and upload it to the “wp-content/themes/your_theme/” folder. Create a new page in WordPress and select “All Posts” as a page template from the “Attributes” menu on your right.

    Publish and you’re in business!