The New Photography Portfolio

Introducing the Photography Portfolio Subdomain

photo-jcdotcomThat would be photo.jeffchappell.com. I’ve actually been doing some photography work lately, although nothing terribly exciting (which one could argue is more my fault as a photographer, I suppose — but the client is happy). But I’ve been thinking for some time that I wanted to create a separate site or subdomain housing a dedicated photography portfolio site — as opposed to just a gallery page or using a Flickr plugin or what have you.

So that’s been this weekend’s project: photo.jeffchappell.com. Once again I tinkered around with some free WordPress themes, but in the end I decided on a responsive photography portfolio theme from ElegantThemes; I’m already a member/subscriber of this service, and its themes generally can be modded within WordPress to do what you want them to do.

On the other hand, I’ve learned that trying to pull in thumbnails from an RSS feed is problematic; that will be a task for future weekends. Anyway, I’ve also started a Photo a Day project on my personal blog, The Gecko’s Bark.

Hooray for free time.

Making Jeff Chappell and WordPress More Responsive

Mobile Is as Mobile Does: Finding a Responsive WordPress Theme

Jeff Chappell is under construction. And this image is ridiculously sexist.Goodness, it’s been a long time, since I’ve checked in here. I’m afraid I’ve let things languish just a bit last year. What was I doing? Well, as elaborated previously here and over at the Gecko’s Bark, I spent 2012 in Sai Gon, Viet Nam, teaching English and dealing with my torn quadriceps tendon. Following those adventures I took some time off for extended holidays.

Now I’m currently back in Thailand — I know, judging from the last time I lived in Thailand full-time, one might be surprised to read these words. But Thailand gets under your skin, I guess, just like Viet Nam. Things are going smoother this time around; there’s not substitute for experience.

Anyway, while I considered another teaching gig — and may in the future — right now I’m studying Thai language and have returned to the journalism fold, currently as a freelance writer and editor. I’ve also been getting back into photography, having replaced the equipment that got hocked a few years back.

In the midst of all this, having recently done a small website for a client — a WordPress installation — I decided I needed to revamp Jeff Chappell dotcom. I’m not at liberty to link to this client’s site for various reasons — non-disclosure agreements and such — but in the process of getting the site up quickly, I chose a free WordPress theme titled, aptly enough, Responsive. With the expanding plethora of mobile devices accessing the Internet these days such as smartphones, tablets and whatnot, themes and websites that can respond natively to the smaller screens and the various length-to-width ratios that come with them are de rigeur.

Actually I was really impressed with Responsive; it looks great on a laptop screens, full-size monitors, mobile phones and tablets, both 10-inch and 7-inch — no matter how you hold them. This is all done natively; no separate mobile theme or plugin required. Looking good on mobile devices was a must for this particular client, so stumbling across this free theme was a happy event.

I looked into using Responsive on this site, as well as several other good free themes out there, such as Fanwood. But the problem I have with these themes is the same thing that compelled me to use a paid theme for this site in the first place; I wanted to be able to control which posts showed up on specific pages using their categories without having to modify the theme’s php files. Another requisite for a theme this time around was being able to modify it, at least lightly, without having to use a child theme; I wanted to be able to insert custom CSS from within the theme’s options in WordPress. More time spent on content and less time spent on mucking about with code is a good thing.

These things are a bit much to ask for a free theme, although Responsive does give you the option for custom CSS, as well as other customization options not always found with free themes. These options actually made it perfect for the aforementioned client, who wanted a static but easily-updated homepage with dynamic content, such as YouTube videos.

Anyway, for myself and Jeff Chappell dotcom, it was back to ElegantThemes. If you’re reading this and wondering why the site looks a little wonky at the moment, that’s because I’m in the midst of converting the site to use Elegant’s Chameleon responsive theme. Between being able to enter custom CSS, it uses WordPress native options to change colors of backgrounds, fonts, links and what have you — on top of being able to specify specific blog categories to specific pages.

ElegantTheme's responsive Chameleon WordPress theme

In the past I’ve chosen not to use the sliders that ElegantThemes seems to embrace (along with a lot of other theme designers), but now that the underlying code is native to WordPress these days, they work much smoother than they used to in the recent past. Furthermore, it works well when viewed on a tablet or other touch-screen device, for obvious reasons.

So pardon the construction dust; it should be settled and cleaned up shortly.

Postscript: Why am I using such a ridiculously sexist “under construction” image on my portfolio site? Well, this image actually figures in an interesting earlier post about image tags, SEO and website traffic. That doesn’t make it less sexist, however, I admit.

In Which An Image Tag Boo Boo Drives More Traffic

Heeeey! Boo Boo Bear! What's in that pick-i-nick basket? Aw, Yogi, it's a conflict with a WordPress plugin causing my xml sitemap to be missing in action.
No, not that kind of boo-boo.

Image Tags and Title Tags, Even for Unrelated Terms, Help People Find Your Pick-i-nic Basket

In this previous post I talked more about search engine optimization (SEO), image tags, title tags, and how they can drive a lot of traffic that one might not expect and otherwise wouldn’t get. As a dear, departed TV pitchman used to say: “But wait! There’s more!” Even this website, JeffChappell.com, is not immune to this accidental image tag-driven traffic phenomena.

Now bear in mind, this site exists as a repository for my journalism clips. Essentially I wanted one place where I could preserve the highlights of my journalism career, one that spans both print and online mediums, as opposed to a list of links that frequently changed or broke as publications changed owners, web servers and content management systems. I wanted to be able to point other people to this place when necessary, along with my resume and whatnot. I also wanted to have it as an example of my web skills.

As such, unlike my personal blog, which follows my whims all over the place, this site is tailored and optimized for specific terms, namely Jeff Chappell. Type in “Jeff Chappell” into Google and many pages here are among the first links that appear. Type in “Jeff Chappell” and “writer” or “journalist” and virtually all of the first several pages of results are links to this site.

And yes, I can see from Google Analytics and Webmaster Tools that when people search for these terms, they find me, or rather this site. Just the other day someone from my hometown was searching for “jeff chappell writer,” and it lead them here – I assume this must be one of my erstwhile Facebook friends.

And recently someone from Russia was searching for “jeff chappell agilent.” Why someone from Russia is searching for articles I wrote years ago about a U.S. semiconductor test company that no longer exists, at least not under that name, I can’t imagine – but then that’s why I created this site.

While I do update this blog from time to time, I don’t do it frequently, and even less so since I began teaching ESL again. As such, this site doesn’t generate nearly as much traffic as The Gecko’s Bark and Barking Book Reviews.

Furthermore, one would think that what traffic it does generate would be from searches on topics that I wrote frequently about in the past, along with the odd search here and there for my name. And one would would be wrong.

 SEO Image Tag Boo Boo: You’re Doing It Right

Google Webmaster Tools reveals that a Boo Boo image tag can be a good thing, in terms of driving impressions. No, the number one traffic driver to JeffChappell.com these days is “boo boo” and derivations of that term, including “boo boo bear.” What’s more, this involves a single post from more than a year ago.

How is this? Once again, it’s the image tags.

Not long after I first started using what is still the best SEO plugin for WordPress that I’ve found – and I’ve tried others before and since – I had a problem with an update of the WordPress SEO plugin by Joost de Valk. I used that experience to write a post about software upgrades, and how one should be careful, and not just always upgrade for the sake of upgrading.

As you can see, it wasn’t so much a problem with the plugin upgrade as the way I had it configured; in prior versions the configuration was fine but with that particular upgrade the configuration caused a … wait for it … a boo boo.

To find some art to break up an otherwise big wall of text, I chose Boo Boo Bear, of Yogi Bear cartoon fame, which you can see at the top of this post. In fact the title of said post, as you can see, included the words Boo Boo, as in a problem or error.

At the time I did this, I thought I was just being cute and amusing myself. But, as it turns out, there are a lot of people searching for boo boo, not to mention Boo Boo. Who knew?

Not I. Apparently a lot of these searchers – I’m guessing – are related to one Boo Boo Stewart; search Google Images for “boo boo” and lots of pictures of this young actor pop up. Seems he was in one or more of the Twilight pablum movies. Or perhaps they are searching for Boo Boo TV. I don’t know. The only other Boo Boo I knew of before this, other than the eponymous bear, was blues musician Boo Boo Davis.

But I digress. As you can see from the screen cap of Google Webmaster Tools above, these terms result in more page impressions in Google than anything else on this site. It doesn’t generate oodles of traffic, but then this isn’t a high traffic site, nor does it need to be.

But once again it shows the importance of image and title tags and SEO. If you have a site that’s monetized through advertisement as opposed to selling memberships or actual products, then you want as much traffic as you can get; the more impressions you get the better, obviously.

And yet, you still see so many sites that fit this description that don’t have image tags, or are poorly optimized in terms of titles, subtitles and links. And the thing is, it’s such a simple thing; it only takes a moment. If you are using WordPress, I’ll plug the Yoast WordPress SEO plugin; it really does simplify SEO to a large degree. In fact it’s pretty amazing for a free plugin.

Yogi Bear and Boo Boo discuss the merits of proper SEO over a lunch pic-i-nic basket.To then as you can see to a certain extent it’s luck, of course; I had no idea that by using an image of Boo Boo Bear with proper image tags that I’d drive this extra traffic here.

But that’s my point: you just never know who is going to be searching for what.

Ain’t, that right Boo Boo?

Of course it is Yogi.

Update: Now this is amusing; I thought something like this might happen, but I didn’t really expect this big of a jump. In just the few days since this post was put up, this site’s impressions for the term “boo boo” have jumped from 8,000, with 16 clicks, to 12,000 impressions and 60 clicks as of April 9th.

I’ve also jumped up a notch in average position in search results from 11 to 10, which probably accounts for the jump in impressions in just few days’ time. I feel kind of bad, as this page is probably not the boo boo they’re looking for; although I’m sure a majority of that is coming through image search, in which case I do provide some Boo Boo.

On the other hand: lulz!

SEO Plugin Boo-Boo

Always Be Careful With Software Upgrades; WordPress Plugins Are No Different

Heeeey! Boo Boo Bear! What's in that pick-i-nick basket? Aw, Yogi, it's a conflict with a WordPress plugin causing my xml sitemap to be missing in action.
No, not that kind of boo-boo.

Ah, WordPress and plugins.

They can be wonderful additions to this open-source blogging platform, adding functionality that either doesn’t exist (yet) in vanilla WordPress, or else simplifying other things that one would normally have to code or otherwise do manually. As such, plugins can be particularly useful for those not familiar with HTML and CSS, or Java, for example.

But plugins can be a hassle sometimes, namely when one doesn’t work like it should. Sometimes it can be a conflict with another plugin, which is why it’s a good idea not to use any more plugins than you have to. At other times, it can be because you’ve upgraded WordPress, and the plugin isn’t compatible in some way, or otherwise conflict with, the latest version.

Sometimes it’s just an upgrade to the plugin itself that may not always workout like the author had intended – but such is the nature of all supported software. And sometimes it may be something peculiar to the user’s configuration that the original author of the software didn’t foresee.

A case in point of this latter phenomenon is the latest version of the Yoast WordPress SEO plugin, developed by Joost de Valk. If you’ve used WordPress and studied or otherwise worried about search engine optimization (SEO) at all, you’ve probably at least heard the name.

I’ve used this plugin for awhile now; it’s very comprehensive – one might even say a bit complicated, at least for someone new to all this – but it works great and simplifies SEO chores considerably. An example: with this plugin you can easily manipulate the SEO post title and meta description so that they are different from what a reader may actually see when they come to a blog post or page. You can do this by hand in the code, of course, although it’s kind of problematic with the way WordPress dynamically serves things up – thus the beauty of an SEO plugin.

Of course any SEO plugin that’s any good will let you do this; the Yoast SEO Plugin does many other things as well – a dizzying array of things, in fact. Yoast actively supports this plugin, along with several other plugins he maintains for use with WordPress, and his blog and Website feature a lot of information on SEO.

Recently he updated the plugin into version 0.4.1 – officially it’s still in beta, but it works fine (this is the first time I’ve had any problems with it) – and changed the way xml sitemaps are generated. If you’re not familiar with sitemaps as they pertain to SEO not to worry; they are just things that search engines use to help their spiders crawl (as in navigate) and index your site. You don’t have to have a sitemap, but it can help, this ability to control how a search engine indexes your site, particularly when it comes to search optimization.

To make a long story short, with this version the Yoast SEO plugin dynamically generated sitemaps, as opposed to creating an actual sitemap file (i.e. sitemap.xml). So whenever a search engine goes looking for a site’s sitemap, it is generated when called upon, as opposed to being cached to a disk on your server.

You can read more about why Yoast changed the way his WordPress SEO plugin handled xml sitemaps on his blog. As you can see from the comments on that post, though, some people had problems. I was one of those people. I had actually upgrade the plugin a few days before I noticed, but when I was checking my statistics in Google Webmaster Tools, I noticed their were crawling errors and a big red x next to the sitemap entry for all of my sites.

The problem option in the permalinks section of the Yoast WordPress SEO plugin that was causing my xml sitemap boo-boo. Fortunately a lot of people weighed in on Yoast’s blog with their problems and what they did to get things to work; Yoast chimed in often, as you can see (and this is one of the things that’s makes the open source community, and WordPress in particular so wonderfully awesome). It didn’t take long for me to narrow down the conflict. One part of the Yoast SEO plugin deals with permalinks; one of the options was “Redirect ugly URLs.” This actually redirect links back to the site that contain errors or junk at the end of them – unwanted parameters, as Yoast says. The plugin also notes that “this is not recommended in many cases” as it can conflict with other plugins.

I’ve used it in the past without any problems that I could discern though, so I always left it checked. But actually it was this redirect option that was causing a conflict with the dynamically generated sitemap in the latest 0.4.1 version of the same plugin, which creates a sitemap at http://exampleurl.com/sitemap_index. (The sitemap index actually contains links to several different sitemaps corresponding to pages, posts, etc. Again, if you read the related post on Yoast.com, he explains why it does this.)

Anyway, I should note that just about a half hour ago (about 2:15 a.m. Wednesday, June 8 – I’m nocturnal, don’t you know) the plugin has already been updated to 0.4.2. I don’t know if this update addresses the sitemap issue some were having, but I would presume that it does – although it doesn’t seem to have changed the dynamically generated sitemaps, at least on the surface. I just know that I’m not having any problems so far with 0.4.2.

So there you go. Just a story about WordPress plugins and how problems can arise. Of course as problems go with software, this was pretty painless. And let me just offer props once again to Yoast and his WordPress SEO plugin.

Widget Titles, WordPress and Broken Code

Skipping a WordPress Widget title can unintentionally break your div tags and CSS.Who Knew Skipping a Widget Title Would Break the CSS of the Widget Underneath?

A few weeks ago I wrote here how one misplaced single quotation mark managed to break an entire WordPress site, resulting in the dreaded WordPress White Screen of Death. The other day I experienced a somewhat similar mishap when putting some Google Adsense code – the underlying code behind Google text ads – here on this site.

It wasn’t catastrophic; it didn’t crash the entire site. But it had unintended consequences that took a while to track down, and finding the problem involved going through the code that WordPress generates.

Like most people who use WordPress, I just cut and pasted the Adsense code into a text widget and pasted the widget inside a sidebar, within the WordPress admin interface. I’ve done this before on other sites; it’s a pretty routine thing.

And yet, when I went to the Jeff Chappell dot com’s homepage, the result was the image you see here to the right. The Google Adsense ads were showing up, but the widget down below, WordPress’ meta widget with the standard login and RSS feed links, was broken – it displayed in my browser, but it’s supposed to have an off-white background as dictated by CSS. Only it was displaying transparent with the site’s background image was showing through.

Insert WordPress widget title, and viola, problem solved.At first, because I like to use Opera – I’ve been using Opera for years – I thought it must be a browser compatibility issue. But I checked the site in the latest versions of Firefox, IE and Chrome, and each displayed the same problem, so I couldn’t blame it on Opera. At the same time I thought it might be some weird caching issue; I use W3 Total Cache, which is a great WordPress plugin, very powerful – sometimes a little too powerful. But no, this wasn’t the problem either.

So it was time to start looking at the source code that WordPress was generating. To make a long story short, the problem was … wait for it … *insert snare drum roll* … the fact that I hadn’t included a heading or title in the widget housing the Adsense code.

When you use a text or any other widget in WordPress, there is a place to put a title. I left it blank, and as a result, it didn’t produce the necessary div tags when WordPress generated the html code for the page. Consequently the necessary calls to the CSS file weren’t taking place, resulting in the broken meta widget.

The problem lies in the fact that both widgets reside in the same part of the sidebar, bound together code-wise with div tags, specifically class “block.” A look at the code reveals the exact problem. Here’s what the first several lines look like — including the problematic ones —  for the lower right sidebar on this site that contains the widget with the adsense code:

[html]

Paying the Bills

[/html]

The key turned out to be the div class “widgetcontent” — or so I thought at first. As you can see from this snippet of code below, generated when I take away the title text in the WordPress widget window, without the corresponding div tags that handle the widget title being called upon in the code produced, the div tags with the widgetcontent class aren’t produced either:

[html]

should be the one that appears broken, looked fine. I couldn’t suss out at first why this was happening (in all four browsers, no less), but it ultimately didn’t matter, as I had discovered the problem.

It still bugged me though. After taking another look at the entire chunk of code enclosed by the “block” div tags, I figured out what was really going on. When we skip the widget title, we end up with one to many closing div tags, so while the Adsense widget is enclosed in the proper “block-content” div tags, the meta widget underneath is not, resulting in the transparent widget — a look at the CSS file reveals that it is indeed the missing block-content div tags for the widget on the bottom that give us the unwanted transparency.

Anyway, if you’re exceptionally nerdy and want to see for yourself, here’s the entire chunk of offending code. If you match up the div tags — easy to do in Notepad++, incidentally — it’s easy to see where the boo-boo occurs.

[html]
div class=”block”>





[/html]

In any event, I hope this may help other folks in the future who encounter a similar problem. Who would have thought that skipping a widget title would create a hassle?