Genesis column shortcodes with custom classes

(tl;dr download .zip here)

I, more often than not, roll out WordPress sites these days using Genesis as my framework of choice for theme development. It’s mostly because I’m lazy, and it does a bunch of stuff for me that I can’t be bothered to do myself (which gives me more time to focus on actually developing cool things… and sleeping)

One of the things the Genesis Framework has built in is column classes to divide up content into column blocks, but using these in pages means writing out HTML which scares most clients and users away. There’s a plugin — Genesis Easy Columns — which allows users to drop in column shortcodes at the click of a button that do the work for you. Great for clients, but it’s pretty basic… e.g. I can’t specify additional column classes, so making one column a different colour (or a different font size, or whatever) that I want clients to be able to edit later on is a pain in the arse.

I’ve very quickly created my own column shortcode plugin which does much the same job as GEC — in that it allows you to specify columns with a shortcode — but approaches it slightly different. Firstly, it’s just one shortcode (which allowed me to type a shitload less code) and secondly, it supports additional classes. And also doesn’t have nice user-friendly clicky buttons but I might get round to that in 2020.

It’s basic, but it does the job, and if you want it you can download it from its shiny new GitHub repo. I don’t really have any intentions on adding this to the WP plugin database (laziness) but I might be willing to make it better in the future so feel free to leave feedback on this entry.

How do I use it?

Let’s say you want two columns, you’d probably do something like this:
[columns size="one-half" first="yes" classes="foo bar etc"]some content[/columns][columns size="one-half" classes="alt"]some more content[/columns]

Or for three columns:
[columns size="one-third" first="yes" classes="foo bar etc"]column 1[/columns][columns size="one-third"]column 2, no classes on this one[/columns][columns size="one-third" classes="numberthree"]column 3, extra classes on this one[/columns]

etc etc… use the Genesis column classes as a guide. Remember to always set the first attribute on the first column in a row.

Note: while this is designed to work with the column classes supplied in the Genesis framework, you could easily make it work with your own WordPress theme by nabbing the columns CSS available in github.

Support?

Hahahaha you know I have 2 kids and a million jobs, right? Good luck with that.

How to: make the whole WordPress excerpt clickable

A client recently asked me to make the post excerpts in their blog page clickable. This seems like a reasonable request and the logical answer (if you know your WordPress basics) is to open the relevant template file (probably index.php or home.php in this case) and wrap the_excerpt(); in <a href="<?php the_permalink(); ?>".. (and so on).

Except there’s two problems with this method:

  1. WordPress formats the excerpt and wraps it in <p> tags
    Which means that you’re then wrapping your block level <p> in an inline <a>. I’m sure some of you either don’t know what this means or don’t care, but I do. Let’s call it nostalgia for the days of carefully ensuring the mark-up on every page was W3C compliant. ;)
  2. Links, which are allowed in an excerpt, break your code
    If you have a link in your excerpt, which is allowed in WordPress, the link in the excerpt will break the link wrapped around the excerpt. You then end up with things linked that you don’t want to be linked and things that you do want to be linked, not. Or something.

Solution one: add_filter()

There is a simple solution that makes use of the built in excerpt filter, allowing you to wrap the excerpt in a link before it gets marked-up, solving problem 1:

function clickable_excerpt( $excerpt ) {
	return '<a href="'. get_the_permalink() .'" class="excerpt">'. $excerpt .'</a>';
}
add_filter( 'get_the_excerpt', 'clickable_excerpt' );

(This is ideally placed in your theme functions.php file)

Solution two: add_filter() & strip_tags()

The only thing is this *doesn’t* solve problem 2. The effects of the broken link mark-up are less disastrous with this method, but not removed altogether. The simplest (dirtiest) solution to this, aside from not using links in your excerpts at all, is to remove HTML from the excerpt altogether:

function clickable_excerpt( $excerpt ) {
	return '<a href="'. get_the_permalink() .'" class="excerpt">'. strip_tags( $excerpt ) .'</a>';
}
add_filter( 'get_the_excerpt', 'clickable_excerpt' );

Bob’s your uncle: clickable WordPress excerpts without the invalid mark-up. :)

HostPapa? More like HostCrapper*

hostpapa-logo* sorry, I couldn’t help myself.

Yesterday I opened my work inbox first thing to a panicked email from a client (Sutton Community Farm) labelled “URGENT” – their website had gone down (again) with a Resource Limit Reached error. I quickly shot off a reply to let them know that this was usually caused by hitting a resource limit (e.g. server CPU usage) imposed by their host — HostPapa — and then I began investigating.

It only took a few moments to narrow it down to a massive stream of traffic to /wp-login.php which clearly indicated an attempted brute force attack on the WordPress login system. Common, but annoying. Coincidentally at the same time I noticed my own site (this one) was being hit by a similar attack though with less force – enough to slow the site down but not enough to push it beyond allowed resource usage levels like my client.

I e-mailed the client to let them know the cause of their issues so that they could update their support ticket with HostPapa, and a short time later emailed my host (Clook Internet) to notify them of the issue I was having.

Within 4 minutes Clook had not only dealt with my issue but had responded to my support ticket to let me know. Problem solved, top notch service as always.

HostPapa on the other hand, despite having been told exactly what the issue was, took hours to reply before finally suggesting:

Enable Gzip compression form cPanel:
login to Cpanel and then go to Software/Services.Click “Optimize Website”. For the best results,select “Compress the specified MIME types”, ascompressing all of your content can sometimescause problems in your hosting configuration. Makesure all MIME types on your website are compressedto get the most benefits out of the compression

Seriously! GZIP compression, while nifty for optimising page load times by serving compressed versions of files to your browser, is not going to mitigate a massive brute force attack.

I provided my client with an excerpt of the visitor logs so that they could show HostPapa exactly what was going on (because at this point I assumed HostPapa were too incompetent to do this themselves) and set about trying to find a way to attempt to block the traffic myself with the limited tools available through the basic HostPapa shared hosting cpanel. This was not only necessary but urgent – Sutton Farm’s veg box system hinges upon an export generated by the website on a Monday which they could not get to while the website was down.

By early afternoon I was able to curb the effects of the massive traffic load using the deny all directive to throw up an error 403 for all IPs except for my own:

<Files ~ "^wp-login.php">
Order deny,allow
Deny from all
Allow from 82.##.##.##

Satisfy All
</Files>
ErrorDocument 403 "Not acceptable"

which allowed me to download the export and get the farm the data they needed to process their customer’s orders for the week.

At 16:53 yesterday, a full working day since the issue was initially noticed, the wp-login.php page was still being absolutely pelted by malicious traffic attempting to brute force a login to WordPress, and HostPapa had still made absolutely no attempt to help sort the issue which not only affected the uptime and stability of Sutton Farm’s site (potentially causing them to lose business) but, as is the very nature of shared hosting, will have affected other users on the server their site is on.

HostPapa finally responded again late last night (far too late to actually achieve anything) pointing out that the site was now back up but we’d probably want to install a WordPress security plugin. Oh, and they suggested optimising the site again.

HostPapa’s response to my client’s urgent enquiry was absolutely terrible. Not only did they take far too long to respond (ironic, given the tagline on their site Real help – from real people – is here when you need it) to a business critical issue, but had absolutely no solutions to the actual problem even when they were directly informed of the issue and provided with proof of what was happening.

I’ll be migrating my client to an alternative hosting provider this week and in no uncertain terms recommend against using HostPapa’s web hosting services.

My Internet History

I’ve been trawling the Way Back Machine lately for links & images for my recently re-added geek t-shirts collection page (work in progress), and happened upon a link to a page I used to have: “My Internet History”. I don’t have this page any more, it was one of the things I dropped when I tried to make my site more “professional” (ha) but as my audience now and my audience 6 years ago are fairly different I thought it’d make an interesting blog post & give a little insight into where “this” all began. Here goes (written in 2008)…

I first started venturing online in 1999 when my Mum showed me ICQ and said that I could use it to talk to my Grandad. I’d hold conversations for with him and with Mum’s friends for hours, simply because I didn’t understand the scope of this great network of pages that we call the Internet. ICQ was the beginning and the end, as far as I knew.

It wasn’t long before I discovered that there was much more to the Internet than the flowery chat client, and began exploring the likes of Neopets. I had a Jubjub, and a small shop, moved on to run a successful guild, co-own another and then staff at one of the largest in Neopia. I could waste hours on there, without a care for my exams that were approaching. It was on Neopets I first got introduced to HTML, and that’s where this all began.

A simple sign-up at Geocities found me the space I was looking for, and I began creating pages using my limited HTML knowledge and Geocities’ pagebuilder. I created a successful poetry site for teens and kids to read and submit poetry; the site is still associated with me since my move to hosting and a domain of my very own (Google took about 3 years to figure out I don’t offer poetry anymore.)

It took me several months to get any content up on to my shiny new website, and even longer to learn HTML. I kept at it, snatching up any opportunity to practise and hanging on to every piece of good code I ever wrote. It took me over a year to even begin to grasp the basics of CSS (because there weren’t as many tutorial sites back then) and another before I knew the rest. I grabbed standards with both hands in 2003, and have been researching into accessibility and usability since.

In 2004 I started looking at this ‘thing’ called PHP — I started using a popular skinning script and even installed a toplist ‘program’ (which, incidentally, was complete crap and led to the defacement of my domain and deletion of hundreds of files). I started dabbling with Content Management Systems such as WordPress and in 2004 wrote my very first script. That script was a massive failure but eventually became what you know as BellaBook today.

2005 was a big year for me — I took several tumbles, coding-wise, but managed to pick myself up and in August 2005 wrote my own weblog with integrated article commenting management system. Although the backend went through many changes over a few years, it was eventually retired when my website outgrew the scope of the script. I have also developed CMS for a handful of my other websites and developed Intranet ‘packages’ for Telford College of Arts and Technology as part of work experience and my first job.

Besides jemjabella, I own and run several separate sites — tutorialtastic being a key point of concentration for me. I took over the running of the quilting bee in May 2006 after having provided programming and technical support for over a year. I maintain the pages, deal with the copious amounts of e-mail as well as processing new members. When I’m not working on my own sites, this is where my time goes.

BellaBook is still going, and used on millions of websites worldwide. Tutorialtastic went on to become Girls Who Geek. I still have the quilting bee although my role in the site is purely to keep the forum up to date at the minute. My time ‘goes’ on much more than the Internet and my websites now though, but that’s what having kids does for ya!

5 reasons to go self-hosted with your blog

If you weren’t convinced by my 5 reasons NOT to go self-hosted with your blog post, or indeed need a little shove to the world of self-hosting, here are my 5 reasons to go self-hosted with your blog:

1. Your service provider is unlikely to just close, taking down your data

Although I’m not suggesting WordPress.com or Blogger are going anywhere soon, years (and years) ago when everyone was building their websites on Yahoo! Geocities nobody could have imagined that it would eventually close giving users just a few months notice to move. In the event that your host were to close, you can drop a cPanel export and any decent host will import it giving you everything where you left off: mail, website, data, stats, the whole kit & kaboodle.

2. You get control over what adverts are shown (if any)

WordPress.com has rules over what links you’re allowed to put in your posts (no affiliate links, for example), completely restricts third party ads and shows its own ads to non-logged-in visitors. Blogger also shows its own adverts and allows you to add some ads but doesn’t give you the same range of adverts you could go for on a self-hosted system. This means that if you want to monetise your blog your options are severely limited.

Alternatively, if you’re like me and don’t want any adverts you’re stuck until you pay the $30 WordPress upgrade fee – and for not much more you can buy a year’s hosting.

3. Wider selection of themes and plugins

WordPress.com lists 219 themes at time of writing, which compared to the millions and millions available (free and premium) on the web, I find quite restricting. Blogger is more flexible in its theming but neither offer the true power of the themes or plugins you can add to a self-hosted website.

Plugins are hugely powerful – able to turn WordPress from “just a blog” to a content management system capable of anything from e-commerce for a little local shop to a multi-seller marketplace; contact and customer management; forum functionality & communities, etc. The list is endless (and this is the core reason why I personally stay self-hosted.)

4. It’s cheaper to buy separate hosting + domain than it is to pay for add-ons through wordpress.com

If you want to turn blogging into something ‘more’ – i.e. have your own theme, domain, remove third party adverts etc – by the time you’ve paid for the necessary WordPress upgrades you’re looking at a bill of $85 or more. You can buy a small hosting package and domain for similar pricing and get email and extras to go with it.

5. It’s cooler to be self-hosted

That’s what I keep telling myself anyway ;)

P.s. don’t forget Google Reader is now officially closed, so if you’ve not added me to bloglovin’ or subscribed elsewhere yet, do so!

5 reasons NOT to go self-hosted with your blog

I’ve seen a lot of fuss over the past month or so about (parent) bloggers who ‘have’ to go from a WordPress.com or Blogger account to a self-hosted blog. As a web developer, it’s obviously in my best interest for there to be lots of self-hosted blogs and sites out there because ultimately it means greater potential for work. However, the reality is that not everyone will need to, and here’s 5 reasons to stay put:

1. You’ll not have to worry about plugin or software updates

Although WordPress has made updates super simple with the implementation of the single click updater in 2.7 (we’re now on 3.5.1 to give that context) there’s no guarantee that a) the core upgrade is going to run smoothly or b) your plugins and themes are going to be compatible. Unless you’re running a local copy of apache or similar to test run your updates offline first, you can end up in trouble with conflicting versions of different things. WordPress.com handles all this for you.

2. You’ll not have to worry about hackers and bots

Because of the popularity of standalone WordPress, it has recently come under fire from “hackers” (I use this term loosely) brute-forcing installations relying on the default username ‘admin’. In some cases, the sites have been brought down by the sheer amount of attempts on the admin account username in what is effectively a denial of service attack. What’s more worrying is that security researches believe that compromised installs could be used to form a “super botnet” to attack even more sites.

3. It’s free

Free is my favourite cost :)

4. You get a community with no extra work

As a new blogger, one of the hardest things is keeping the motivation up to carry on posting with very little in the way of feedback (comments, subscribers etc). The advantage to hosted services, be that WordPress.com, Tumblr, Blogger or similar is that you effectively become part of a community straight away, leaning on the identity of that service. Most hosted services have tools which allow you to ‘reblog’ posts, comment on them through your profile etc which builds up the momentum with little extra work on your side.

5. You get the stability of a massive network

Unlike a shaky little shared box, which is what the majority of personal blogs (and indeed many business sites) are hosted on, you get to be part of a massive network of servers which often have excellent uptime stats because they have “worst case scenario” traffic management and redundant hardware. To quote the WordPress.com FAQ directly:

WordPress.com runs on hundreds of servers located in several separate data centers in different parts of the USA. We’re not perfect and we do occasionally experience problems, but our network is designed so that sites continue working even when servers or parts of the network fail. Outages are rare and brief.

The great part is, this stability is all part of the service and you’re not tied in to any contracts (see point 3!)

Of course, there are advantages to going self-hosted, and I’ll follow this up with a 5 reasons to go self-hosted post just to present a balanced argument… but it’s not for everyone & you should not feel forced into it!

the same but different

Eagle-eyed visitors will notice some slight changes here: the addition of a third column, changes to the footer, etc. I’ve converted my theme to run off the genesis framework (mostly for the power of the widgets and templates and all that crap).

In theory it means easier maintenance in the future, and has taken about 4 months to get this far because I only get 10-15 minutes a day to work on the bloomin’ thing (work, babies, house, moan moan moan). Some bits that were broken before (twitter feed) are now working again, but there’s bits that WERE fine but are now broken (no decorational border thing around posts … it’s getting there) Let’s call it a work in progress.

WordPress Multisite Shared Media Library

Dearest WP users and developers, this post is a plea for help.

I am trying to create a WordPress Multisite Shared Media Library. I want to be able to upload content (PDFs, images etc) to the main blog of a WP Multisite install, and access that media from other blogs on the same network (there’s a plugin for this already). However, I need to be able to attach that media to a post/page, NOT just insert it. I want to do this without duplicating the actual file… i.e. if I replace the original file, all posts/pages that have the media as an attachment will be looking at the new file, not a copy of the old file.

I have already created the functionality to duplicate the database info (copying from attachment info from the main blog to the sub-blog) allowing WordPress to see my new child attachment. The attached media shows up in the Gallery for the relevant new post/page that I’ve attached it to. The GUID for the attachment points to the file in the original location on blog #1. However, WordPress does some fancy footwork with Multisite URLs to turn the file path into the sub-blog URL upload path instead.

File location is actually "URL/wp-content/uploads/2012/11/Chrysanthemum.jpg", not "URL/files/ etc..."
File location is actually “URL/wp-content/uploads/2012/11/Chrysanthemum.jpg”, not “URL/files/ etc…”

I am fairly sure I need to filter upload_dir (add_filter('upload_dir' ..) to make WP look in the right place, but I don’t know how to do this conditionally for certain attachments, without affecting the attachments that need to be (or are already) loaded to the sub-blog.

I am hoping that all makes sense, and that someone out there has an idea of how to help! :)

‘Old Post’ Notice

On this blog I have around 10 years of archives. That’s a lot of posts from over the years that may not necessarily reflect the “me” in 2012. I didn’t want people to potentially get the wrong idea about me if they read an old post, but I didn’t want to delete them either: that defeats the point of a blog archive. Solution? Automatically mark old posts with an ‘old post’ warning.

First, to write the warning… this is mine but you would want something that reflects you:

This post is over 6 months old. This means that, despite my best intentions, it may no longer be accurate. Age, motherhood, experience, loss… these things have all changed me from when this blog was started back in the heady (ha) days of my youth.

As much as I would like to go back and edit 10 years of archives to provide an insight into the ‘me’ of now — changed opinions, fresh outlook, updated coding snippets and revised website advice — it would probably take years to do so (by which point I’d have to start again!) This would defeat the point of keeping these archives anyway.

Please take these posts for what they are: a brief look into my past, my history, my journey.

This should be saved in “old-post.php” in your WordPress theme folder.

Next to make the warning appear. I only wanted the warning to appear on individual post pages, so I added this to single.php just above the call to comments_template():

<?php
if (strtotime(get_the_time('F j, Y')) < strtotime("-6 months"))
	include('old-post.php');
?>

The code takes the date from the current post, converts it to a Unix timestamp (the number of seconds since January 1 1970 00:00:00 UTC) and then checks it against the converted date from 6 months ago. If the post timestamp is older than 6 months, thus has a lower count in seconds than our "-6 months" date, the old-post.php file which contains our warning is included.

Alternative Method

It's also possible to include your warning without changing the template file single.php. The advantage to this would be if you don't feel comfortable editing PHP or have a premade theme which is overly complex.

Simply add the following to your theme functions.php (making sure it's within a <?php block):

add_filter( 'the_content' , 'old_post_warning' );
function old_post_warning($content) {
	if ( is_single() && strtotime(get_the_time('F j, Y')) < strtotime("-6 months") ) {
		$content.= '<div id="oldpostwarning">';
		$content.= 'your warning here';
		$content.= '</div>';
	}
	return $content;
}

Your warning will now automatically appear after single posts older than 6 months.

If you want to adjust the time before the old post warning appears, e.g. to have it show on posts older than one year, change "-6 months" to "-1 year" etc.

Like this? Would you rather have this as a plugin that you can easily update via the WordPress Admin panel? Let me know in the comments...

Work In Progress: rev.iew.me Conversion

rev.iew.me is a website / web page reviewing community. Launched in 2008, it was designed and developed specifically to help web designers, developers and hobbyist webmasters receive critical feedback for their website projects.

As part of a larger package of updates and new features coming to the site, I have been plotting a conversion to WordPress to take advantage of built in user and content management functionality.

reviewme-sneak-preview

Using custom content types I have been able to replicate the Website and Review listings, with specially designed pages implemented in the relevant places taking advantage of the WordPress Template Heirarchy. Reviews are associated to the right website using the post_parent field.

website-page

Next, I will be creating custom user roles to power the member, ‘star’ member and moderator user sets. These will eventually be tied into bbPress which will be powering the new official rev.iew.me forum; this will also allow me to port over the existing private messaging system features.

The real trick will be getting to grips with the right hooks to integrate the ‘points’ members earn when they participate… watch this space!

Remember Amelie?

Do you remember Amelie? My sofa, that is…

Homebase brand Amelie Left hand Corner Group Natural sofa

Turns out she’s not as comfy as she looks when you’re stuck on her nursing 24/7 (oh, newborns…)

Still, being sofa-bound means I’ve been able to (literally) one-handedly launch Jem On WordPress. I wanted to do a full, ‘official’ launch, but as making a big deal out of my project ideas seems to bring sudden death to all inspiration I decided it was probably better to get it up, actually do some work on it, and then start telling people. So here I am, telling people.

I wonder what my words per minute is, typing one-handed…

Starting from Scratch – 3 Must Have Plugins

When I set up a new WordPress blog or website, which can be several times a week these days, there’s a short list of must have settings to configure, tweaks to make and plugins to install. Below are my top 3 ‘must have’ plugins for every WordPress install.

WordPress SEO by Joost de Valk

Although I think the out of the box Google-friendliness of WP is one of the great reasons to use it, the WordPress SEO plugin by Joost de Valk (aka Yoast) offers a huge range of excellent add-on features that naturally complement what WordPress offers.

The plugin is well documented both in the settings pages and on the official site, allowing even the most SEO-phobic webmaster to take advantage of Yoast’s experience with search engine optimisation to push their site ahead in the search engines.

Contact Form 7 by Takayuki Miyoshi

There are tons of contact form / form creator plugins available for WordPress, but Contact Form 7 is my go-to contact solution. The small feature set appeals to my minimalist, efficient side without compromising on the important things you need within a mail form. Importantly, it’s easy enough for anyone to generate the form they require without tinkering with code.

Google Analyticator by Ronald Heft

If you’re not running some sort of analytics on your website, you’re doing it wrong! My analytics package of choice is Google Analytics, and what better way to link it into your WordPress site than with a plugin that shows a graph of the last 30 days of visitors, a summary of site usage, the top pages, the top referrers, and the top searches all on your dashboard? Google Analyticator does all that and more.