Now certainly, I could have used one of the php bits to create thumbnails on the fly like TimThumb – but I really dislike using plugins for things I can do without them. She also gets totally confused using custom fields, so that’s out as well.

What I needed to do:
1. Determine a standard size for thumbnails and post images that would work well for her theme.
2. Create a post thumbnail using the first image attached to a post.
3. Display the post thumbnails on the blog main page listing of recent posts.
4. Create a standard image that would be displayed if she forgot to add any images to a post.

Since I’m a big fan of reusing code, I decided I wanted to use the built in sizing options of WordPress to get this done. I remembered recently reading an article with a chunk of code, so I found it again and reused that. The code process can be found on Web Developer Plus.

Setting The Image Sizes

Go to your WordPress backend and then Settings -> Media and configure the sizes that work well for your theme.

The thumbnail size is the most important. I set this one to 150px by 150px and selected the option to crop the thumbnails to that size. The reason I selected the crop is in the likely case the photo she’s using isn’t a perfect square, the image won’t look out of proportion when it’s sized down to 150×150.

Creating a Thumbnail From The First Image

This is where we get the code bit from Web Developer Plus and with a couple of minor changes end up with this:

<?php
// Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- Display the image in here -->
<?php }
?>

The code, at this point, doesn’t do much but it will in the next steps. I do want to stop and explain the terminology a bit. You’ll notice the use of the word ‘attachment’ in the code above. That’s how WordPress identifies the image associated with the post. Think of sending an email and attaching photos to it. The code finds the images attached to the post and selects the first one. It puts the information about that image in the $img variable we’ll use later.

It is important to note that this only works for attached photos because that is what WordPress it set up to handle. That means that if you host your photos elsewhere and just link to them – it’s not going to work. You have to actually upload them into WordPress using the media uploader.

Deciding Where To Put The Thumbnail Code

Since I want the thumbnails to show up on the main page of the site in the list of recent posts down the content section, I need to edit the index.php that displays the content. Your site may use the_content() but in this example the site is using the_excerpt(). It doesn’t really matter, so long as this stuff goes inside the loop but before the spot you want to show your photo.

<div class="thecontent">
<?php the_excerpt(); ?>
<span><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="readon">Read the rest of '<?php the_title(); ?>'</a></span>
</div> <!-- end thecontent -->


I’m going to add the bit of code right above the call to the_excerpt() because that’s easiest at this point.

<div class="thecontent">
<!-- get the thumbnail -->

<?php
// Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- Display the image in here -->
<?php }
?>

<!-- end get the thumbnail -->
<?php the_excerpt(); ?>



Display the Thumbnails on the Main Page

Now the code is actually in the area it should be, but it’s still not going to show anything until we put something in place of the ‘<!– Display the image in here –>’ placeholder. What the code HAS done is created the $img variable we can call. So let’s get that working by putting in some code that will call the image.

<div class="thecontent">
<!-- get the thumbnail -->
<?php
//Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>

<!-- ***** THE ACTUAL IMAGE ***** -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- ***** END THE ACTUAL IMAGE ***** -->

<?php }
?>
<!-- end get the thumbnail -->
<?php the_excerpt(); ?>


What the above code has done is take the placeholder and replace it with a call to the image.

Then since this is for a front page thumbnail, we want people to go to the main article so we create a link around the image that points to the article.

Finally, for CSS styling I wrapped it in a span called the-thumbnail (you can wrap it in something other than a span, name the class anything you like, and style it any which way you can think of).

But What If… There’s No Image?

But wait… what if my client forgets to add an image to a post? That one article will look strange on the main page without an image when most of the others have one.

I want to create a fail-safe for dealing with an instance where she might forget to put in a photo for the post. What to do first is create some kind of dummy image (maybe just a large square with the site logo / branding or whatever you want). Upload that image somewhere.

<!-- ***** THE ACTUAL IMAGE ***** -->
 
<!-- # if post has an image # -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- # END if post has an image # -->

<!-- # if post doesn't have an image -->
<?php } else { ?>
<span class="the-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="http://thedomain.com/fallback-thumb.jpg" />
</a>
</span>
<!-- # END if post doesn't have an image -->

<!-- ***** END THE ACTUAL IMAGE ***** -->

The most important line in that new section is <?php } else { ?> — that tells it to do something if there is no photo.

You’ll see that you can just as easily change the url of the image to be any image location you upload the fall-back image to.

Putting It All Together

So here’s what we came up with after that. I’ll highlight the sections of my template code so you can see where I put it inside the template. Remember, your index page may not use the_excerpt() – it may use the_content(). That’s perfectly ok so long as:

1. You put the code that generates the thumbnail somewhere inside the loop – the loop beginning looks like this: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
2. You put the image display code where you want it to be.

So here’s the final code I used on my clients site:

<div class="thecontent">

<!-- get the thumbnail -->
<?php
//Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- ***** THE ACTUAL IMAGE ***** -->
 
<!-- # if post has an image # -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- # END if post has an image # -->
 
<!-- # if post doesn't have an image -->
<?php } else { ?>
<span class="the-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="http://thedomain.com/fallback-thumb.jpg" />
</a>
</span>
<!-- # END if post doesn't have an image -->
 
<!-- ***** END THE ACTUAL IMAGE ***** -->
<?php }
?>
<!-- end get the thumbnail -->

<?php the_excerpt(); ?>

Oh, and remember — if you don’t like the size your thumbnails are coming out as — change it in Settings -> Media.

I hope you found that useful

~Nicole

Quit Using URL Shortener Services.

Why Not Just Use Some URL Shortening Service?

If you’re arriving at this article directly, head back to part one to read about why to make your own short urls.

In a nutshell, I’ll summarize the whole article by saying that asking people to trust a cloaked link is not something you should ask anyone to do.

Methods of Shortening URLs

There are several different ways to handle URL shortening, and I’m going to list as many as I can think of here.

For WordPress Self-Install Users

If you use WordPress, you have it fairly easy. Remember back to the day you installed WordPress and you had those ‘ugly’ urls that were just your domain and a number? Did you realize those URLs still work? They do, nowadays they just redirect to whatever nice readable format you changed your permalinks to be (which I’m sure you did, riiighhht?).

In fact, you users have two options. Use a plugin or add the code yourself.

The Plugin Option:

A good one is la petite url which uses your own domain to make your short url. When you save a post it shows the short url in the sidebar of your administrative interface. You can then drag this into your post. If you’re comfortable editing your theme files, you can add a bit of code to your single and page files so that it shows up automatically. It’s available on the WordPress Plugin repository here: la petite url

The Template Option:

Just head into your template editor and add a link to your short url into your Single and Page files. This should work fine for most templates, although a highly customized one may have different page types that you will need to add this to separately.

For a simple text display of the link, add the following code where ever you want in your theme file:
<span>Short URL: <?php get_bloginfo('url'); ?>/?<?php the_ID(); ?></span>

If you want to use a textbox type of display where people can easily select the text, try a variation on something like this:
<span>Short URL: <input type="text" value="<?php get_bloginfo('url'); ?>/?<?php the_ID(); ?>" style="width:50%;"/></span>

For WordPress.com Users

As you know, you can’t install plugins or edit template code if you have a WordPress.com blog. You can, however, still make your links a bit shorter than they are now because your posts still have a numeric version available.

You would need to add (manually) text at the bottom of your posts to provide the short link to your visitors. The link would look like this:

http://yoursite.wordpress.com/?POSTID

But how do you find the POST ID for a WordPress.com blog? It’s not hard at all. I’m going to provide two screenshots to show you where to find it.

From the posts list screen:

Finding Post ID From List Screen.

From the editing screen:

Find Post ID While Editing.

Remember, for WordPress.com people, this means adding that at the bottom of your posts when you make them.

The series so far:

Part 1: I Don’t Trust Short URL’s
Part 2: This article
Part 3: Make Your Own Short URLs in EE, MT, Joomla and Drupal
Part 4: Make Your Own Short URLs With Domains or Software

The generic search is going to search everything, well not exactly since the WordPress search is fairly lousy without some plugin help, but it will work for category searching just fine. In fact, it’s only going to take one line of code to add the functionality to your search, if you’re using a basic theme like the WordPress Default. Custom themes might be more of an issue, so if you get stuck, paste the code that handles your search in the comments and I’ll -try- to help, no guarantees.

Ok, let’s do this with the WordPress Default theme.

The default theme search box should look like this in your sidebar:

The Search Box Before Category Search.

We need to add our line of code to give the users an option to search by categories. So I want you to head over to Appearance -> Editor which will pull up your template files. This will show you the right template files IF you are currently using the WordPress Default theme, if not, use the dropdown box in the right area of the page to switch to the WordPress Default theme.

On the right side of the page, click on the Search Form (searchform.php) file to open that one for editing. The code page you’re viewing inside should look like this:

WordPress Default Search Form Editing.

The code looks like this:
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>


We’re going to add one line as follows:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=Search Everything'); ?>
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>


So let’s break down what that line is doing:

<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=Search Everything'); ?>

Depth = 0 is setting it so that we’re seeing ALL categories, not just parent or child categories. In another article coming up I’ll show you how to be more specific about categories when dealing with parent/child categories.

Order By = Name is telling them to show in alphabetical order.

Hide Empty = 1 is making sure we don’t see categories that have no posts in them to be searched.

Show Option All = Search Everything is creating an option for them to search all the posts and should be the default.

What do we get?

Search By Category.

Showing Dropdown

Now it’s up to you to style it and make it look pretty

~Nicole

As you can see from the above screen shots, this design is going to come with a few color themes, and you can easily add your own as well.

The top bar is a CSS drop-down menu. For those on browsers not supporting the CSS, clicking the links will instead toss people to another area to read the subcategories and subpages etc… I’m still in personal debate over how to handle that menu. I’m experiencing a small inner rebellion against using Javascript to make the menu work for IE, and would prefer to just have the design follow a rollback for IE like any of the other older browsers will see. In either case, the menu options will be available, just in different ways.

This is, in my opinion, the kind of theme for someone who needs structure in order to keep their blog minimal feeling without letting it get cluttered over time. I’m not going to add in places for people to drag a million widgets and fill up all the empty space – that defeats the purpose.

The theme is about keeping things simple.

I’ll post another update when I’ve got more to show.

~Nicole

I very quickly came to develop a theory that perhaps it’s because users don’t think they do anything – and in many cases they’re absolutely correct. There are a startling number of WordPress themes that don’t include a built in ability to show the excerpt anywhere, so it’s no wonder people see little use in typing up extra words that aren’t even shown. Much to my surprise, I realized that even the 2 themes that ship with WordPress (the default and the classic) don’t automatically display excerpts. Very odd.

In my way of thinking, the MAIN page on a typical blog should display posts with the following conditions applied (granted, I’ve created some VERY custom themes that you’d never guess are blog driven, so keep in mind that this is for the ‘typical blog’ style) :

1. Check to see if there is an excerpt, if so, show the excerpt only.
2. If no excerpt is present, check to see if there is a ‘more’ tag when showing the post and use a link to continue reading.
3. If no excerpt or more tag is found, then display the whole post.

So how do you do that with WordPress in your templates? It’s pretty easy.

I’ll give you instructions using the WordPress default template (the one based on Kubrick at the time of this writing).

1. In the Administration backend, go to Presentation -> Theme Editor
2. Select ‘WordPress default’ from the drop-down list, then click the select button.
3. On the right hand side, locate the file link that says ‘Main Index Template’ and click on it.

Now that you are in the correct section, locate the following piece of code:
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

You are going to replace that entire piece of code with the following:

<div class="entry">
<?php if (!empty($post->post_excerpt)) : ?>
<?php the_excerpt(); ?>
<?php else : ?>
<?php the_content('Read the rest of this entry &raquo;'); ?>
<?php endif; ?>
</div>

That will create the functionality to do exactly what I outlined above, however, if you’d like to also add a link to the post underneath the excerpt (if one exists) so that it looks similar to the way a ‘more’ tagged post will look, you can do that as well. To create a link to the post under the excerpt, simply go back to this line:

<?php the_excerpt(); ?>

And add a line similar to the following underneath that line:

<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read the full post &raquo;</a></p>

That line is just normal WordPress post link, so you can modify that to suit your needs design needs.

The finish product code display various types of posts like this, depending on whether they have excerpts, more tags, or none:

Of course, this example uses the WordPress default template, but the same code can be used on most any template if you find the index.php or main index page and the spot where <?php the_content(); ?> is in the code.

Have fun!

~Nicole

Amusingly enough, I got the same error as the admin.

It looks like a new version came out with a fix, but I’m going to give it a bit of time just in case, watching the comments on the page about the upgrade, just to make sure it’s working as it should first.

If you haven’t upgraded to Bad Behavior 2.0.11 – you might want to consider looking into doing that. I had no idea people were getting blocked trying to comment until a few of my wonderful visitors were nice enough to email me and let me know.

To those who have attempted to comment – please accept my apologies for the quirky ‘behavior’ lately. (Yes, it’s early, and I’m cracking corny jokes.)

~Nicole

It was not intended to take quite so long, but ah well. Not only was it done in my sparse free time between client work, I had a few other personal things come up that took me out of commission for a bit (a death in the family, a major case of the flu I’m still getting over, lots of school stuff with the kids, etc..). In the end, I think it came out good for a first version of a re-design.

Part of the problem of designing for yourself, as a designer, is that it’s never perfect enough, and I have the feeling that this will be a case of always feeling the need to tweak and adjust and modify ad infinitum.

The old main site looked like this for the last couple of years:

The new version is much more reflective of my likes in color and design:

I’d say it came out to be a pretty major overhaul of the design.

Granted, it wasn’t without issues, which is why I’m calling it Version 1.0 of the new design. A few things glitched at the last minute, like the jQuery effects suddenly not working (I haven’t tried yet to see exactly what caused this – whether it was a new version change or if I just added a typo somewhere.), and having some lovely issues with Google reading my sitemap/robots files (or not reading them for that matter) so that my the 5-6 Page rank is suddenly coming up ‘not available’.

On a design scale, it’s going to need an alternate color version and I realize that. Not everyone is a fan of dark colors like I am (even if all my testing tools say I used enough contrast to make it readable). It’s a priority on my to-do list for the next version. In fact, in an ideal world I’d like to offer several swappable design themes that are entirely different. That should be easy enough considering that the new site design is one I converted to a WordPress theme. Yes, that does mean that I’m using WordPress as a content management system on my main site now. I figured that since I’ve been suggesting WordPress as a CMS for my clients, I might as well ‘practice what I preach’ so to speak.

In the end, this is what it has consisted of, and been built with, on a technical level:

• Photoshop for the design.
• Plain text hand-coding to XHTML.
• Converting the XHTML to a custom WordPress theme.
• Custom coding for child pages on WordPress.
• FeedList plugin for secondary content links from this blog.
• SearchEverything plugin for full search – it uses lots of WP pages.
• Contact form plugin from Green Beast with custom CSS mods.
• WordPress.com stats plugin for .. well, stats.
• Google XML Sitemap Generator plugin.
• Slimbox with Mootools for WP – Deactivated as a plugin and just pulling files from the plugin directory – it’s a long story.
• sIFR for special font headings.
• jQuery for effects – still needs tweaking.

For now, that’s what’s been involved in the CMS’ification of WordPress for this design. There is quite alot still on the agenda, and I’ll document as I go how I continue to evolve the site – just in case anyone aside from me finds it as fun and interesting.

~Nicole

So I was browsing around looking at WordPress themes (again) and I decided to conduct an experiment on my ‘reaction’ to the themes. I ended up collecting a list the 13 most eye-catching, reaction causing (good and bad), non-traditional theme headers I saw yesterday.

Consider this ‘inspiration’ for the non-advertising specialist. Or just use the images as ideas of what you could possibly do with your own site. As a web designer I’m often expected to know what kind of images and text are best for marketing and advertising etc.. Well, I don’t know about you, but my knowledge of that is fairly limited. That’s what advertising and marketing people are for. I know people who work in advertising – they practically have an encyclopedia of "what images cause what reactions in people" and "what works get people to do certain things" and probably lots more I’m unaware of.

However, even with my limited knowledge, I think most people have heard about the ‘above the fold’ importance. That need to grab people and make them at least move their eyes around and possibly stay a bit longer. Attention getting top areas of your site. Something that makes the speed-browser in all of us slow down. All the screen-shots are above the fold for me – only what I could see immediately. For reference, I’m on a wide screen monitor with high resolution, but I also have 7 Firefox toolbars (don’t ask) taking up space at the top.

I look at theme houses (sites that are mega-lists of themes) ALOT, and I realize there are actually a couple of stages you have to go through to get someone to actually look at your theme:

1. The first is that you have to get them to take notice of your design from a little screenshot.
2. Part two is to get them to click that all-important ‘demo’ link so they look closer at it.
3. Part three is getting them not to hit the back button because they hate what is above the fold on site.

If you can keep them there a few seconds, you might actually get them to like the entire theme and consider downloading it.

So, back to the experiment.

I decided to write down what I thought about as I was browsing. I wanted to see which ones got the most reaction out of me based on the header section. Obviously the themes I’m going to show you got me to click on the little thumbnail, but I’m going to share my first impression of some of the themes I looked at yesterday.

Now, hopefully by the time you’ve gotten here, all the images have loaded. So have fun, and feel free to try out the demo links so you can see if your ‘up close’ reaction was anything like mine.

Disclaimer: I am not advocating these themes as great themes. In fact, I don’t like most of them as entire themes. Some are actually just plain broken beyond the header. These are just examples of eye-catching header designs, nothing more.

Odd Note: Some of these themes actually ended up having the same author. This was not intended, I merely bookmarked the designs that got the most reaction and then when I was writing this up I discovered some had the same designer.

#1 – Forbidden Forest

Thoughts: "Wow. That’s really cool looking."
Links: Theme page. Online Demo. Designer.

#2 – A Good Catch

Thoughts: "People just LOVE to use animals to make people go ‘awww.’ Cute sketches."
Links: Theme page. Demo page. Designer.

#3 – Cherry Swirls

Thoughs:"Whew, that’s alot of color. I like the sweeping curves. Cutesy and summery but that bright yellow is evil."
Links: Theme page. Demo page.

#4 – City Slicker

Thoughts: "Now that’s neat. I like all the graphics at the top… but why so teeny?"
Links: Theme page. Demo page. Designer.

#5 – Desktop

Thoughts: "I love the collage headers. Always makes me stop and look at all the individual stuff."
Links: Theme page. Demo page. Designer.

#6 – Dreaming Off

Thoughts: "Lots of color, but I like how it is hanging on the sides like that. It makes a major impression above the fold, but its actually not the ‘header’ that does it but everything that’s around it.
Links: Theme page. Demo page.

#7 – Fleur

Thoughts: "Gorgeous. Finally, the only one I like the whole page of. Very minimal."
Links: Theme page. Demo page.

#8 – Kukufall

Thoughts: "Interesting illustration. Really grabs your attention."
Links: Demo page. Designer.

#9 – Lover Paradise

Thoughts: " Color! Wow. Lots of it. Very neat looking."
Links: Theme page. Demo page.

#10 – Orange Kitten

Thoughts: "Awww. Again, we know about the animals, but now we also have the protective reaction and it looks like the darn kitten is about to fall off."
Links: Theme page. Demo page. Designer.

#11 – My Gerbil

Thoughts: "Eep! What a way to freak out your viewers and get their attention. I literally leaned back when this loaded up. Just the thing… a rodent with beady eyes staring at you!"
Links: Theme page. Demo page. Designer.

#12 – She’s Got Style

Thoughts: "Ooooh… I love that drawing! I wish I could illustrate like that.. I need to find that artist."
Links: Theme page. Demo page. Designer.
(Note: There is a separate artist of the graphic. She has a deviantART page here http://vikifloki.deviantart.com/ and has a great looking gallery of other illustrations.)

#13 – Summer Holidays

Thoughts: "When all else fails… just put the site on the wrong side and scribble all over it."
Links: Theme page. Demo page. Designer.

That’s all folks! Hope you were inspired, and at least not too creeped out by the rodent

~Nicole

If you’d like to join in and don’t have a theme handy, there are a couple I happened upon that were really great for it.

There’s a blog called Scribblescratch.com that’s got quite a few unique themes in various ‘girly’ designs.

Here are two on the site specifically for the October pink switch:

You can download them both here. There’s actually quite a few others on that page that might serve well for the pink theme.

I’m not entirely understanding why all these themes are flagged as ‘based on the Dusk theme by Beccary’ … they all seem unique enough to me in comparison to stand on their own, but ah well, to each his own.

I’m really liking the pink plaid, I might even borrow that one this year. Who knows.

One from last year that I recall was this one from 5thirtyone.com.

Not sure if that theme works with new versions of WP, but you might check it out.

Another from last year was this one, which actually has 2 looks to it. A business’ish look and a fun look. I much prefer the fun look:

You can check out a live demo here, or see the downloads.

If you none of those fit what you are looking for, head over to the Pink Section of the Theme Viewer and browse around

Have fun!

~Nicole

While working on my new primary site design for Website Style, I ran into a major hitch. Most of the PNG fixes just simply don’t work for the kind of site I’m making. Each one had a different problem.

Some used the proprietary CSS ‘expressions’ which we know are not good because they massively can slow down a site when they fire off thousands of times in a session.

Others wanted all my png’s in one directory. It’s simply not possible with my setup. So my choice there would be to completely reorganize all my CSS and HTML to put the files in one directory? No thanks.

Some only handle the images found in the img element, not the CSS background images.

Some only handle the CSS background images.

I’ve found some that work in the past, but what I’m looking for is something that:

1. Must handle PNG’s in multiple directories. (Major priority)
2. Must apply the fix to .png’s in the img element.
3. Must not choke up and die when used with WordPress
4. Ideally can handle background images as well, but if I have to I don’t mind working without the background image.

That final twitchy behavior of the alternatives I found seemed to somehow or other not want to work with WordPress (which made no sense at all to me because its all PHP anyway so why should it matter, but apparently it did).

If anyone knows of any suggestions, please let me know!

~Nicole