Building a free WordPress website: Part 3

This is the third and final part of my article on How to Build a Website with a Quality Free WordPress Theme. In the first article, which can be found here,  I showed how to set up the basics while in the second article I customised features and added content. Here, I am going to sort out the sidebar and footer areas with some interesting widgets and add some content and styling.

Customising the sidebar

Adding content to the sidebar is where the wonder of WordPress widgets come into operation. Widgets can be simply dragged and dropped to add content and features to your sidebar.

To see the widgets that are already installed, go to Appearance/Widgets and you’ll see Available Widgets. The first one we want to add is a search form, so scroll through the widgets to find the Search widget, drag it over to the right of the page into the Sidebar Widget Area and press Save. You now have a Search form at the top of your sidebar.

Next we want to install the Black Studio Tiny MCE plug-in which will give us a brilliant and vital widget which is a full visual editor so we can put any text or visual content we want in the sidebar.

Graphene has native support for Black Studio Tiny MCE so you might find it’s already installed but if it isn’t, go to Plugins/Add New on the left-hand side of your admin panel. Use the Search facility to look for Black Studio and upload, install and activate. Go back to Appearance/Widgets and you will find the plugin has made the widget available to you as shown in the screen shot below.

Installing and activating the BlackStudio Tiny MCE plug-in makes the widget available to you.
Installing and activating the BlackStudio Tiny MCE plug-in makes the widget available to you.

Drag the Tiny MCE widget over to the Sidebar Widget Area on the right-hand side of the page and drop it under your Search form.

You can use this widget the same as you would use the main WordPress visual editor for posts. I’ve added another book picture and blurb to this widget as shown below.

31newgrapheneblackstudiomcej
Black Studio Tiny MCE is an essential plug-in which gives you a widget you can use to add any content to a sidebar quickly and easily.

I’ve pressed the Save button on this and added a couple more widgets with book and blurb content. Just drag each widget over to the Widget Area panel and drop it beneath the previous one.

Here’s what the content of the top widget looks like on the site.

32newgraphenewidgetsidebarj

It looks OK but the line spacing is cramped so I’m going to adjust the spacing to 24px by adding in a couple of lines of CSS.

 

The code to do this is:

 

.sidebar p {

line-height: 24px;

}

 

Copy and paste this into Appearance/Edit CSS and Save stylesheet and the spacing turns out as in the screen shot below.

32newgraphenesidebarwidget24pxlinespacedj
The sidebar looks better with 24px line spacing.

I’ve added four separate Black Studio Tiny MCE widgets to the sidebar, each with a different book and blurb, so the sidebar is filling up nicely now.

Add the Special Recent Posts widget

It’s a good idea to have a list of your recent posts in the sidebar so people can easily see what you have on your site. This can be done by using the very popular Recent Posts widget. It’s a good widget but there’s a Special Recent Posts widget I’m going to use here which will add some sparkle.

You’ll need to download the Special Recent Posts plug-in to get this widget. If you go to Plugins/Add New and search for Special Recent Posts you can download it and activate it quickly and it’ll be available in your widgets.

This is a free plugin but there’s also a professional version available which adds a great range of options and only costs $6 as shown below.

36newgraphenespecialrecentproj

Once you’ve installed and activated the plug-in go back to Appearance/Widgets and you’ll see the Special Recent Posts widget available. Drag it over to the sidebar. I’ve placed it halfway down between two posts above and below.

When you open the widget, you’ll see seven tabs worth of options plus a tab giving credits. The basic options allow you to add a title for the widget, whether to display posts or pages and the maximum number of posts/pages to display. I’ve titled this Recent Posts to show a maximum of 10 posts.

34newgraphenespecialrecent1j
Lots of options available in the Special Recent Posts widget.

 

For Thumbnails Options under the next tab, set Display Thumbnails to Yes, thumbnail width to 100px and thumbnail height to 150px.

35newgraphenethumboptionsj
Setting the thumbnail options in the Special Recent Posts widget.

 

Moving on to Posts Options, I want to show the whole title so for the cut title text after choice, I have selected Use full title (no cut). I only want to show the title plus thumbnail so my only other choice that makes any difference in this tab is the bottom selection of Content Selection Mode I have opted for Title + thumbnail.

I’m ignoring the Advanced Posts Options 1 and 2 for now.

I only want to show the blog posts in this widget and not the ones from Featured in the slider so I’ve gone to the Filtering Options tab and entered the numeric category ID for the blog posts. Including a specific category in this way will exclude all the others.

You can find out a numeric category ID by going to Posts/Categories and clicking on Edit from beneath the category you want. Look at the URL (web address) at the top of the page and towards the end of the address you should see ID=28 (or whatever your numeric ID is). Put this number in the widget’s filtering options and if you have more than one ID separate them with commas.

On Layout Options, I’m going to keep the default of H3 for the widget title header. This is for the overall widget header.

When you’ve made all these changes click on the Save button at the bottom of the widget and you’ll see your sparkling new widget content in the sidebar. My site’s Recent Posts look like the screen shot below.

33newgraphenespecialrecentpostsj
The Special Recent Posts widget brightens up a page and offers an easy way of adding thumbnails.

That completes my sidebar for the time being. You can add widgets in both sidebars if you opt for a three-column set-up with two sidebars but I’m sticking to one sidebar here.

Setting up the footer area

You can also add widgets in the footer widget area. You can leave this empty but I like to add some content to bolster up the site..

Under Graphene Theme Options/Display you’ll find Footer Widget Display options fourth from the bottom. This only has one selection, which is number of columns to display and I’ve set this to 2 columns.

Under Appearance/Widgets you will see the Footer Widget Area on the right-hand side. I have dragged another Special Recent Posts widget into this area and made the same settings as for the one in the sidebar.

Underneath this, drag over an RSS widget (entries from any RSS or Atom feed) from the available widgets. I’m going to enter an RSS feed from the New York Times book section here and display a dozen items from the feed. There are thousands of RSS feeds available to add some outside interest to your site so you have plenty of choice and you can find out the feed addresses with an internet search.

I've added an RSS feed from the New York Times Books section to the fotter widget area.
I’ve added an RSS feed from the New York Times Books section to the fotter widget area.

The last thing I’m going to do is change the colours of the footer. This is the bit that says Copyright etc, rather than the footer widget area which can be changed separately.

Changing the colours of the footer is done under Graphene Theme Options/Colors, with Footer at the bottom of the selections. I like footers that stand out, so I’ve changed the background to dark blue, the headings and link text to yellow and normal text to white.

2footeroptionsj

The screen shot below shows what my footer and footer widget area look like.

footer2ajYou can see this adapted Graphene theme in action at www.mysteryreading.com. The screen shots below show the original theme layout and my website so you can see the overall difference in look.

newgraphene1j

mystery2j

As you might see, I’ve made a few more adaptations, including changing the header  and main navigation menu to white backgrounds. There were also a couple of shadows to the top and below the header which I removed with a bit of CSS. If you’re interested, this is the code to get rid of the top shadow:

 

#header {

border-top: 0 solid #000;

height: 90px;

width: 100%;

position: relative;

overflow: hidden;

}

 

This is the CSS code to remove the bottom shadow:

 

.menu-bottom-shadow {

background: url(images/sprite_h.png) left top repeat-x #eee;

height: 0;

width: 100%;

}

 

That wraps up my rundown of the Graphene theme and I hope it has shown you how it can be easily adapted for an author’s website. It really is a superb theme that offers a vast range of possibilities for customising easily and quickly. I’ve added CSS here to finesse the theme but if you’re worried about using CSS you could easily get away with just using the choices in the theme options. Go through the options a few times to familiarise yourself and you’ll soon find yourself experimenting with new designs and layouts.

Google now bases its mobile search results on whether a website is mobile-friendly and while Graphene displays well on mobile tablets, you’ll need to consider some further options for smartphone display. I’ve written a separate article on How To Make Your Website Mobile-Friendly which sets out some of the possible choices. You can check whether your website is mobile-friendly at Google Webmasters. As you can see in the screen shot below, www.mysteryreading.com passes the mobile-friendly check.

mysterymobile1

Probably the easiest and cheapest way to make a site mobile-friendly is to use the Mobile Theme module from the Jetpack package of plug-ins which allows smartphone viewers to see a mobile theme with your site’s latest posts, a menu to access your pages, and a search box and have the option to view the desktop site.

The company which offers the Graphene theme also has two paid-for mobile solutions — Graphene Mobile ($24) and Graphene Neo Mobile ($29). These are basically separate themes which take over when your site is being viewed on a smartphone. They add masses of configuration options for mobile sites and you can either import most of your desktop settings or set up a different look for your mobile site. You can find out more at www.graphene-theme.com.

Part 1 of this article on the Graphene WordPress theme can be found here.

Part 2 of this article on the Graphene WordPress theme can be found here.

How To Make Your Website Mobile-Friendly