Website Solutions – Part 1: Self-Hosted WordPress versus WordPress.com

Much as I like WordPress, I realise that some of the alternatives could also be good choices for building a website. I decided to make a test site to compare a few of the popular options. This post concerns self-hosted WordPress and WordPress.com.

Self-hosted WordPress is flexible and customisable.  It can be extended, using plugins, to suit a variety of different types of site. But, if you choose to use it, then you should accept that you will be responsible for maintaining it.

To make your site less vulnerable to hacking you should keep your version of WordPress, your themes and your plugins up-to-date. Plugins like Wordfence offer some security and can send you emails to remind you to update your plugins. But this cannot 100% guarantee that your site won’t be hacked. You should keep regular backups, which you could do using a plugin such as Updraft Plus or you could pay a monthly fee to have your website backed up by VaultPress (from $5 per month).

If you are keen to use WordPress but don’t want the responsibility of keeping it up-to-date and backed up, then you have a couple of options:

My Requirements for this Exercise

I decided to build a photography website that would be separate from the Website Help site, but with a similar look. I would want:

  • A logo
  • A menu at the top of each page
  • A slideshow of photographs (sliders are less popular than they used to be, and not really necessary. But for the sake of this exercise I wanted to see how easy it is to include one)
  • An “About” page
  • A contact form
  • Either a portfolio or gallery, or both (in practice I probably wouldn’t need both)
  • A blog
  • Links to my social media pages and my other websites
  • A search box
  • The site to be responsive
  • Control over the colour scheme, the fonts and the background (which should be a paper effect to match this site)

It’s important to note that I did not require e-commerce for my site. If you want to sell products through your site you can use a free plugin such as WooCommerce to sell through a self-hosted site, but this is not possible at WordPress.com.

 

Getting Started

Self Hosted WordPress

The WordPress software itself is free but you will need to pay for a host and a domain name. Many hosts include one-click installation of WordPress in their control panel.

screen print of cpanel for wordpress installation

screen print of cpanel for wordpress installation

 

Once WordPress has been installed, you can go to the dashboard of your new site to start adding content and changing the theme etc. There are thousands of plugins and themes available, many of which are free. Look at the reviews and ratings and use a trustworthy source, such as WordPress.org. Adding a new theme is straightforward. The dashboard connects you directly to the WordPress.org themes directory from which you can install free themes, or alternatively you can upload themes that you have purchased elsewhere.

 

themes wordpress hosted a

 

I picked a free, responsive theme called GeneratePress and installed a plugin I had purchased to add some extra features to it.

WordPress.com

You can sign up for a free WordPress.com here: https://wordpress.com/ and multiple websites (or blogs) can be associated with your account.

 

New site WordPress com 2

Choosing a theme, or changing to a different theme, can be achieved in much the same way as for self-hosted WordPress but there are far fewer themes to choose from. You cannot upload themes that you have purchased elsewhere, but you can pick from both free and paid themes.  I chose a responsive theme called Sketch (note this is also available for self-hosted WordPress).

You can have a completely free site at WordPress.com (which is what I have chosen to do for this exercise) but you may prefer to upgrade so that you can have your own domain name, customise your site and avoid adverts being shown to your visitors. Even if you upgrade,  the footer of your site will still include a link to WordPress.com.

If you choose WordPress.com then any visitors to your site, who happen to have their own WordPress.com account, will see a black admin bar at the top of the page if they are logged in to their account.

 

Adding a Logo

logo wordpress a

Whether or not you can easily add a logo will depend on the theme you have chosen. If your theme supports logos then the method is the same for both types of WordPress.  Some themes will include a way to upload a logo in the Customize panel; others will have it in settings.

 

Menu

WordPress will automatically add new pages to your menu, or you can define your own menus and drag the items into any order. You can indent items to form drop down menus and can have menu items linking to categories, as well as to pages, and to urls that are external to your site.

 

screen shot wordpress menus

 

Slideshow

One option, for both types of WordPress, is to choose a theme with a slider on one of its page templates. If you aren’t totally happy with the way this looks then you may wish to add a different slideshow as shown below.

Self-Hosted WordPress

There are several slideshow plugins available. I used the Pro version of Meta Slider – but even the free version gives you a lot of control over how slideshows look and work.

screen shot meta slider pro

WordPress.com

You can’t add plugins to WordPress.com but it does have some built in extras when compared to self-hosted WordPress. Galleries have a couple of additional options, one of which is Slideshow.

screenshot of wordpress.com slideshow

This is a reasonable solution but gives you much less control than a plugin.  To change the appearance of the slideshow,  you would need to upgrade to an account that enables you to add custom code. You don’t get all the options that the Meta Slider plugin provides for things such as slideshow speed, transitions and navigation.

 

Adding Pages

Both versions of WordPress allow you to add as many pages as you like. Some themes allow you to choose whether or not to display a sidebar on the page.

screen shot wordpress add new page

 

 

Forms

Self-Hosted WordPress

Again, you will need a plugin to add this feature, and there are many options available. I used one of the most popular plugins, Contact Form 7.

 

screen print contact form 7

As the screenshot above shows, forms can include various types of input in addition to simple text fields.

 

WordPress.com

This is another area where, although you can’t use a plugin, WordPress.com has the feature already built in. You can include various types of input field here too.

form wordpress.com

Portfolio

Self-Hosted WordPress

I decided to use the Custom Post Type UI plugin to create a post type for projects and then to display these using the WP Ultimate Post Grid plugin  (with a little tweaking to the way images are displayed). This enables viewers to filter the portfolio to display projects in certain categories.

screen print portfolio example

 

WordPress.com

The Sketch theme that I used includes a special portfolio feature.  I can set up portfolio projects to be displayed with the portfolio page template or a with shortcode.

screen shot portfolio wordpress.com

This portfolio doesn’t have filters like the plugin I used before, but I was able to make a drop down menu to display the different project types on separate pages.

 

Gallery

Self-Hosted WordPress

WordPress comes with a simple built in gallery, but I decided to try a plugin called WP Canvas – Gallery to give me a masonry layout with a lightbox that opens when images are clicked.

gallery wordpress hosted

 

 WordPress.com

As mentioned above, WordPress.com has some extra gallery options compared to self-hosted WordPress. One of these is Tiled Mosaic and there is also an additional media setting to “Display images in full-size carousel slideshow”. This gives me some different ways to display a gallery without needing a plugin.

 

Blog

WordPress started out as a blogging platform so it’s an ideal choice if a blog is a priority. Blog posts can be organised using categories and tags and can have featured images. The exact way that the blog is displayed depends on the theme.

The screen for adding a new post is very similar to the one shown above for new pages. The dashboard lists all your existing posts and enables you to edit them.

wordpress blog posts screenprint

 

Links and a Search Box

Self-Hosted WordPress

Some themes come with built in options for adding links to your social media pages.  The GeneratePress theme does not have a direct way to add these, but it does have several widget areas where links can be added in a text box. I also added the search widget and used a custom menu to add links to my other websites.

links wordpress footer

WordPress.com

The Sketch theme I chose does not have footer widgets, but that is a function of the particular theme, rather than a limitation of WordPress.com.  This means that I have had to put my links in the sidebar, which is my theme’s only widget area.

However, WordPress.com does come with some additional widgets compared to self-hosted WordPress, including a Social Media Icons widget.

What is more, the Sketch theme has a Social Links menu setting to which I can allocate a custom menu.  This puts social icons in the footer of my site.

screen shot sketch theme social links

 

Colour Scheme and Font

Self-Hosted WordPress

There are several ways that you can change the appearance of a self-hosted WordPress site.  Many themes come with options to make it easy to change colours and / or fonts, but if not then you may need to write some CSS code or by use a plugin.

colours wordpress generatepressThe theme I choose, together with its add-ons, includes options for changing the both the colour scheme and the typography via the customizer.

WordPress.com

colours wordpress comI would have to pay for an upgrade to allow me to customise fonts and colors. If this was a real website, rather than just an exercise, then I feel that I would want to do that.  With the upgrade, there is a reasonable selection of fonts available, but not as many as I would be able to use with self-hosted WordPress.

Update: In July 2015 WordPress.com added some free fonts – see here for details: Google Fonts Free Typefaces for Your Site.

Background

It’s common for themes to include an option for changing the background of the site, but this often does not include the background of your pages (i.e. the sides of the site may be patterned but the text will appear on a solid coloured background).  That was the case with the themes I’d chosen, so I needed to use CSS code to put the background behind my text.

 

Self-Hosted WordPress

I’ve used a plugin to add some CSS code.  [UPDATE: WordPress now includes an area for custom CSS ]

custom css screen print

 

WordPress.com

I can add custom CSS only if I pay for an upgrade – the screen print below shows what the site would look like with this enabled.

 

The Results

My self-hosted WordPress site looked like this.

screen print of wordpress website

 

The WordPress.com site is shown below.

wordpress.com homepage screen shot

Further Reading

Here are some links to other blog posts on this subject:

My post about WordPress.com “Pick and Mix Websites”

WordPress.com and WordPress.org  by WordPress.com Support

The $64,000 Question: WordPress.com or WordPress.org?

WordPress.com Versus WordPress.org: Which WordPress Version is Best for Me? by WPKUBE

Self Hosted WordPress.org vs. Free WordPress.com by wpbeginner

WordPress.org vs WordPress.com: A Definitive Guide For 2014 by wpmudev

WordPress.com Review by Site Builder Report

Leave a Comment