How to create a website that looks like this one

A couple of my friends have been redoing their professional portfolio websites lately, which inspired me to do some research on current trends in business and news website design.

As a result of this research, I was finally inspired to bring this site up to date, and since I’m constitutionally incapable of doing something without writing about, here’s what I’ve learned, in case you’re a technology writer or have a blog and you want it to look like this one, without spending any money, and without doing any coding.

Lately, publications have been moving to a tiled design, like the one you see on my home page. That includes The Verge, CNET and CIO. Some spend quite a bit of time and money and build the sites from scratch, often because they want something with a great deal of specialized functionality. Others start with commercially-available templates and do a little additional coding, or modify the template’s stylesheets.

My site here uses a free, standard WordPress theme and it took just a few minutes to set up. Of course, adding the content took a little longer, but I’ve got some tricks there, too.

I started by checking out the themes used by other publications.

For example, Road to VR uses the NewsMag theme, which costs just $49.

They changed the background color from white to black, changed the logo, fonts, and accent colors, but you can see that the basic skeleton of the theme is still there. And, for the non-coders out there, changing the logo and colors is something you can do in the theme’s customization menu.

I wanted to try out several themes on my site to see which looked the best, and I didn’t want to spend $50 a pop, so I looked at the list of the latest free magazine-style WordPress themes.

WordPress has hundreds of free magazine-style themes in its directory.

Once you have your WordPress blog set up, it takes just a few clicks to switch to any theme you want, so I tried a bunch of them.

I use DreamHost for my blog, and have been for a few years, and like them very much, but there are quite a few other hosting companies out there. I like DreamHost because they have a “one click WordPress install” and “one click” is just about my speed. DreamHost costs $11 a month for their basic hosting. If you have low-traffic sites, you can have as many different sites as you want under that one account for no additional cost, so I actually have several sites on that. For my Hypergrid Business blog, which sometimes has over 300,000 pageviews a month, I upgraded to DreamHost’s DreamPress, which runs about $20 a month for a single site. Both options have a discount if you pay for a year at once.

I finally settled on the BlackWhite theme. There’s a commercial version for $35 but the free BlackWhite Lite version offered everything I wanted. If I do ever want to upgrade, to get the additional features or support, I like knowing that there’s a development studio standing behind the theme. Plus, since it comes from a studio and not a random designer, I feel pretty comfortable that there will be regular security updates and other fixes.

BlackWhite theme from ThemeCountry.

I installed the theme through my WordPress installer. To make it look like their demo site, you have to create a new page — I titled mine “Home” — with nothing in it, then, under “Page Attributes,” set the template to “Magazine Homepage.” This is how all the nice-looking magazine-style themes do it, so I was used to this. Then you set the home page of the site to that page, instead of a blog of latest posts. Arranging sections on the front page is easy in their Widget menu, and you can have as many sections as you want, and specify the post category and layout styles for each section. I also uploaded my own logo and set the site colors to match.

Here are some the key features I was looking for when I selected this theme, which I recommend that all bloggers check for:

  • Has a premium version, and is backed by a studio with lots of other themes. That bodes well for security and other updates in the future, as well as the ability to get support and premium features for a small additional price.
  • Responsive design. Today’s websites have to be able to resize themselves automatically to fit on any screen or mobile devices. All modern sites should have this.
  • Customizeable. At this point, every single theme out there should have a customization menu that lets you change the site logo, colors, and other design features. If it doesn’t, just move on.
  • Additional CSS. If you want to make changes to the sites’s fonts or colors or images sizes or spacing between elements or header styles or anything else that’s not by default included in the theme’s customization menu, you have to edit the CSS. Some themes make it very easy with an “Additional CSS” or “Custom CSS” option in their customization settings. That means that you don’t have to change the code of the theme itself, and makes updating it much easier.

How I set up tags and categories

All WordPress themes come with the ability to categorize your posts and to add tags. If you are a writer, like me, and use your website to showcase your work, then you should have the following categories:

  • Featured — these are the posts that you pick to go at the top of your site, and really show off your best work
  • Blog — these are the articles you write specifically for your website about what you’re working on. Like this article that you’re reading right now.
  • Publications — for the rest of my categories, I use the names of the publications I write for, such as CIO, GearBrain, Hypergrid Business, Computerworld, and so on. There is also a parent category called “Publications” that these are grouped under.

With the categories in place, and each post tagged with one or more categories, I can now use the categories to set up the sections on my home page. It also makes it easy for me to link to, say, a page that has all my Independent Banker articles.

For the tags, I use topics that I frequently write about, such as banking, cybersecurity, or China. When I connect to a source or an editor for the first time, I can easily link to a page that, say, shows all my articles about cybersecurity.

How to post articles

Some publications may allow you to reprint the full text of your articles, but there’s usually no need to. Instead, I copy-and-paste the first two paragraphs of the article, then link to the original site for people who want to read the rest. I do not copy the photos that ran with the original articles, but do use a thumbnail of the original article’s photo as the featured image for the article. Both of those fall under fair use, and, so far, none of the publications I write for have had a problem with that.

If there’s no photo to go with the article, I use the publication’s logo as the featured image.

For the date of the article, I set it to the date the story originally ran.

For publications where I write a lot of articles, and can’t be bothered to post every single article by hand, I use a plugin called RSS Post Importer. It automatically pulls in my latest stories and their featured images, so I don’t have to do it manually. Sometimes it pulls in duplicates, or the formatting is a little weird and I have to go in and clean it up. I do that about once or twice a year.

Other plugins I have installed are Google Analytics, to track traffic, and Easy Add Thumbnails, to automatically create featured images for my posts when I forget to.

Other content

In addition to my posts as outlined above, I also some have pages, including a resume and a biography page, a contact page, and a “How to pitch me” page for PR people who want to get their stories and experts into my articles.

With WordPress, there’s a menu customization tool you can use so that you can put those links right at the top of the page. You can also add categories to the menu — I have a “Publications” category, under which I include the most high-profile pubs I am currently writing for.

Final notes

The BlackWhite theme isn’t perfect. For example, I noticed that the dates are not showing up correctly in some places. The way I add articles to the site is by creating a new post with the article’s first couple of paragraphs, then a link to the original publication that ran them.

Since I rarely add the links on the same day the articles were published, I have to backdate the posts. Some pages of the theme show the correct, backdated date, while other pages show the date that I added the post. The front page, for example, shows the correct dates for the articles, the archive pages show wrong dates, and individual post pages also show the wrong dates. I tracked down the problematic function and updated the code.

The theme just came out, so I’m sure the designers will fix the bug soon. I’m emailing them and letting them know the problem and my jury-rigged fix to it, just in case they haven’t noticed. Since the studio makes money when people download the free version and like it well enough to update to the premium one, I’m sure they’ll get it fixed soon.

Finally, there are some other free WordPress plugins that I also use that would be useful to anyone running a small site like mine.

They include Regenerate Thumbnails for when you redo the design on the site and need to change all the image sizes at once, Simple Custom CSS if your theme doesn’t have a CSS customization option, and W3 Total Cache for speeding up site performance.

I also have CloudFlare set up through my DreamHost hosting company, which also helps with site performance and protects against denial of service attacks. CloudFlare is also free.

Finally, I use Sucuri to protect my non-DreamPress websites against hackers and malware. Before, my sites would regularly be down for a day or more at a time if they got viruses while I manually cleaned them up. I signed up with Sucuri five years ago to cover several sites, and I have grandfathered-in low rates. Today, it costs about $200 per year, but still a bargain if you have a site where you can’t afford any downtime or don’t want to hassle with cleaning up infections. Since I signed up, I haven’t had any outages, and whenever there have been any infections, they fixed them immediately — usually, before I even noticed any problems.

DreamHost’s DreamPress has security built in, so I don’t need a separate service for that. Their support has also been very fast and responsive, and I haven’t had any notable problems since I upgraded three years ago. Things do happen — servers go down, or what have you — but I email them and they fix them right away, and I haven’t had any security-related issues at all.

I recommend DreamHost, DreamPress, and Sucuri highly and no, I don’t get paid for saying that. I’ve researched other platforms and providers, and have in the past tried some, or had friends on other platforms who needed my help, and I haven’t yet found anything better.