This is part 6 of the 9-part series on Redesigning StevePavlina.com.
Main Blog Page
For the main blog page, I wanted to go with something simpler and more visual than the WordPress default. I usually give every article a reasonably clear title, so people can tell what an article is about just by seeing the title in most cases, which makes extra snippets from the article text unnecessary. I opted to list 12 articles per page in a nice 3×4 layout, which automatically collapses to different layouts on smaller devices.
Beaver Builder has a built-in module to display posts in a masonry grid fashion, but I didn’t like the irregular look of the masonry tiles since the blocks were different sizes. I thought it would look nicer with a more symmetrical layout, so I added some CSS code to make it so. This makes it faster to scan through the titles quickly.
Archives
For the blog archives, I never understood why WordPress doesn’t include a decent full archives page by default. I tried a few different plugins for this, and I settled upon Simple Yearly Archive.
SYA does a pretty good job right off the bat, but I found its default layout more visually complex than necessary, even after I customized its settings.
So I added some extra CSS to remove the bullets (unnecessary clutter), to use a monospaced font (Lato) for the dates so the dates and titles line up nicely, and to tweak the formatting of each line. This greatly improved the visual simplicity of each page.
Since I only use the monospaced Lato font on that one page, I also added some code to only load this font on the archives page and not for the entire site.
While I worked on the archives page, I also felt I should clean up some of the older posts. The archives were littered with posts about long-expired items such as workshop registration reminders and one-time free online events. There were also hundreds of broken links in these old posts because many websites that I’d linked to years ago had either moved or were no longer online.
To fix the broken links, I used a plugin called Broken Link Checker. It took a long time to run, but it identified more than 500 broken links on my site. I went through them one by one and fixed or removed them all, which took many hours. It was very tedious work, so I paced myself and took a lot of breaks to avoid going insane. BLC is a resource intensive plugin, so I wouldn’t want to keep it running on my site all the time, but it can be nice to install and run it occasionally (like once a year) to find and fix more links that may have gone bad.
Eventually I decided to go through every old post on the site (about 1300 of them) to remove obsolete and useless ones, to fix the formatting of posts that didn’t look consistent with my new design ideals, and occasionally to update some of the content as well. I ended up deleting around 130 old posts, which makes the archives much cleaner and more useful. This clean-up work took more than a week, and it was a tremendous growth experience for me too, as I previously shared in the article 11 Years of Growth.
Home Page
The home page was actually the hardest page to design. I wasn’t sure what to do with it.
Most long-term readers don’t bother to visit the home page since they come here for the articles. And most first-time visitors arrive from search engines or links from other sites that usually take them directly to a specific article. So the home page isn’t the most common landing page for the site.
The old home page was a wall of text, telling people what the site was about and giving them lots of links to explore. For the new home page, I wanted something simpler, more visual, and less cluttered.
I dove in by creating a draft of the home page, including what I thought should be there. My original plan called for an additional Start Here page, where I could direct first-time visitors. Eventually I dropped the Start Here page since it seemed unnecessary.
I decided to make the home page text short and sweet — a quick intro to the site to tell people what it’s about, and that’s about it. No more wall of text.
Next I decided to add the 7 principles from my Personal Development for Smart People book to the home page. Those principles form the core of my personal growth philosophy, and they show up in my work again and again, even when I don’t explicitly mention them. It seemed fitting to put them right on the home page since it lets people know what kinds of values are expressed here.
I added icons to each principle to make the page more visual. These icons are from the Font Awesome collection, which are included with Beaver Builder. Rachelle figured out the colors for this section.
I wanted the home page to invite people straight into the free content, so I included the recent blog posts on the home page as well.
Contact Form
The contact form for my old site was a bunch of custom PHP code that I wrote many years ago, including my own version of a captcha to prevent spamming by bots.
For the new site’s contact form, I looked at two popular plugins: Gravity Forms and Ninja Forms. I investigated both pretty thoroughly, and it was clear that either would do a good job. But I also had some custom code that helps filter my email, and I wanted to be able to use it with whichever plugin I chose. So I emailed the support people for both of these plugins to ask them how to hook into their code to do this extra filtering. Ninja Forms’ support responded faster and with a friendly tone, and they told me how to accomplish what I wanted to do. Gravity Forms’ support was slower to respond, more businesslike in tone, and less helpful in answering my question. I went with Ninja Forms. Good support matters to me.
By using Ninja Forms for my contact form, I was able to eliminate the captcha entirely and still avoid being hammered by bots. That’s because Ninja Forms uses some clever techniques to fool bots, so these spam messages never get through. If you visit my contact form, you may notice that the Send button has a countdown timer on it when the page first loads. A human will surely take at least 10 seconds to fill out their name, email address, and a message, so this won’t slow down a human at all. But a bot will fill in these fields instantly and try to send its message immediately, which will fail to send while the timer is still counting down. Nice, eh?
Ninja Forms also includes a hidden field that humans won’t see, but a bot will treat it just like any other field and try to paste something into it, and when it does, it gives itself away as being non-human, and again the message will be blocked.
I love these bot-blocking methods because unlike captcha, they don’t inconvenience humans. And I haven’t receive a single message from a bot since I launched the new site. Without some kind of anti-bot protection, I’d be receiving bot spam through my contact form every day.
Additionally, I bought an extra add-on for Ninja Forms that allowed me to include a mailing list signup checkbox at the bottom of the form. This way people can easily choose to join my email list when contacting me if they so desire. So far about half the people using the contact form are also signing up for the email list, so I’m glad I added this extra feature.
Given the amount of email I might otherwise get, this still isn’t enough. I need to do some extra filtering to keep my email volume reasonable. Many people in my shoes would hire an assistant to pre-process their emails. But to me it makes more sense to solve this problem further upstream, at the point where the messages are being sent. A little code can solve this problem by filtering the incoming messages, letting through messages I’d like to receive and blocking the rest. So instead of getting 100 messages per day, 90 of which are from marketers or spammers, I’d rather received only the remaining 10, which are from actual readers.
Lots of people try to send me messages each day that I’d rather not receive, such as press releases, guest posting requests, product review requests, book launch announcements, SEO offers, and other marketing and business solicitations. These people don’t actually read my website, even if they claim to. Sometimes their emails get the name or URL of my site wrong. They go around spamming bloggers for promotional reasons, and my site is just one of many that they’re hitting up. If I didn’t filter them out, I’d receive dozens of messages from such people each day.
On my old site, I wrote a custom PHP script to filter these out. For the new site, I decided to write my own WordPress plugin to incorporate this functionality. That would make it easier to maintain.
I had never written a plugin before, so I researched how to do it, and it turned out to be pretty easy. My original code was in PHP, and WordPress plugins use PHP too, so my code didn’t even have to be translated. I got it working in part of an afternoon. It was fun to write my own plugin and to see it show up on the plugins list in my WordPress admin area after I activated it. And I added another new skill to my repertoire.
The plugin is fairly basic. It mainly checks for certain keywords and phrases that unwanted emails frequently contain but that desirable emails from actual readers of my site would be highly unlikely to use. I’ve been adding to this keyword list over a period of years. Whenever an unwanted message gets through, I look at the text and add more keywords to the filter. Now my filter includes hundreds of different keywords. I estimate that this reduces the volume of email I receive via the contact form by at least 90%. Normal feedback still gets through just fine, but the vast majority of the unwanted solicitations get blocked. Most days only one or two unwanted emails get through, and they just help me improve the filtering.
This filtering only inconveniences the people who are trying to inconvenience me. Normal readers of my site who message me like a real human being won’t even notice it since their messages will go through just fine.
If you want to see what happens when trying to send a contact form message that I’d rather not receive, just try sending me a message that includes the word infographic (which is only used by marketing spammers who want me to publish their lame infographics). When you try to send the message, you’ll be shown a message letting you know that I’d rather not receive such emails. I’ll never see the message because it will be blocked before it gets sent. This approach has been working well for many years.
For a while I pondered whether I should improve the plugin and release it publicly, so other people could use it. I backed off from that, however, since I have enough on my plate as it is, and I don’t really want to add plugin support to my life. I also worry that if more people used it, it could lead to an arms race with marketers and spammers trying to outsmart the filtering, just as we saw happen with regular email spam once people started trying to filter it out. It’s also not the sort of plugin that most people would need. And it’s really not that difficult to code anyway.
These backend improvements allowed me to simplify the design of my contact form page. In the past I used to precede the form with a list of dos and don’ts to ask people to please not send me press releases, product review requests, etc. But of course the cretans would ignore this request and spam me anyway. Now there’s no clutter on the contact form for readers who just want to send me a message, and most marketers and spammers will be politely waved off.
Cyberstalkers
Occasionally I have to deal with cyberstalkers. It comes with the territory of having a popular blog. I know that other people have it much worse than I do, especially the women who’ve been targeted in the Gamergate fiasco. That said, I’d rather not receive a regular flow of messages from strangers who claim they want to axe me to death just because I wrote something they dislike.
I’ve seen people deal with cyberstalking in a variety of ways. Some enlist the help of law enforcement. Some engage their stalkers head on. Some have really thick skins and simply brush it off. Some quit blogging or social media altogether, so they won’t have to deal with it anymore.
Since I’m no longer active on social media, the main form of cyberstalking that I get is when mentally unstable people try to send me a high volume of crazy or threatening messages. It’s rare, but it happens now and then.
Just as I did with the other unwanted emails, I opted for a technical solution by adding some cyberstalker defense code to my plugin. This code helps identify and block cyberstalkers from messaging me. The more they try to send me messages, the harder it becomes for them to get through these blocks. The system is designed to confuse them as well, so they can’t tell if I’m even receiving their messages. Stalkers typically have a strong need to know that their messages are being read, so even if they do get a message through, I just use it to improve the code. Eventually the cyberstalker gives up, or they just continue sending messages that I never see. This solution works very well in practice, and it seems more effective than trying to engage the assistance of law enforcement.
I know that if some people are being threatened by a stalker, they’d rather receive the threatening messages, such as for advance warning of imminent danger or to hand the messages over to law enforcement if necessary. My attitude is that I’d rather not receive crazy rants at all. I don’t need the distraction or the vibe reduction. In my case these stalkers are people who’ve never met me nor talked to me, so I don’t believe I’m in imminent physical danger. If that changed or if the stalker was someone I actually knew in person, then I’d probably turn it over to law enforcement instead. But in general I’d rather de-escalate than escalate.
News Section
After cleaning up the archives, the last thing I wanted to do was re-clutter them with a bunch of time-bound announcement posts that would later be obsolete. I wanted a way to keep the blog cleaner, with a focus on timeless content.
I opened a dialog with my readers about this, and I learned that they still wanted me to inform them about free online events and other timely reminders. But they also agreed that it would be nice if this info didn’t clutter up the blog archives.
At one of the local WordPress meetups, I learned about custom post types. I realized that if I created a custom post type for timely news and updates, I could keep it in a separate section of my website, and it could have its own archives too, so it wouldn’t clutter the blog archives. It would be like having two blogs on the same site: one for timeless articles and one for timely news and updates. That seemed like a great solution.
So I wrote another plugin to add a custom post type called news, and I added a News section to display them. Since the news posts are generally a lot shorter than my blog articles, I set the News page to show the full text of these posts on the first page, so people don’t have to click on them to read them.
I’m loving the News section since I can publish shorter updates there that wouldn’t be worthy of a full blog post, such as inspiring videos I like, new features added to the site, reminders about upcoming events, etc.
Posts from the News section as well as from the Blog are both included in the RSS feed, so RSS subscribers will automatically receive both. If people only want to receive one or the other, that’s no problem at all. They can use different feeds depending on their preferences.
News and Blog feed: http://www.stevepavlina.com/feed/
News only feed: http://www.stevepavlina.com/news/feed/
Blog only feed: http://www.stevepavlina.com/feed/?post_type=post
Media Manager
There was no WordPress Media Manager when I started blogging in 2004, so most of the images on my site weren’t in the Media Manager. They were in a separate images directory. During the redesign project, I incorporated all of the site’s images into the Media Manager and updated all the old image links. Fortunately my site doesn’t use a lot of images, so this wasn’t too difficult.
Beaver Builder Update
I just learned that Beaver Builder is now being used on more than 100,000 websites, and it’s only two years old. The developers of this wonderful theme and plugin have already hit their first $1 million in sales. I expect they’ll hit their second million much faster. It’s great to see them doing so well. ?
Incidentally, if you’re reading this whole series, feel free to send me somefeedback about it. What do you think of it so far? Is there anything else you’d like me to include?