Setup Senses

An introduction to the Quote Post Format

This theme includes a few Post Formats for your blog. This tutorial will give you an introduction to the “Quote Post Format” and how it works for the Senses theme. There are many styles for post formats with different themes — basically no real standard, so many theme authors create their own styles and methods. For Senses, I do mine in a unique way that capitalizes on the “Featured Image” for your posts in addition to the default colour background that is normally displayed.

An introduction to Image Post Format

This theme includes a few Post Formats for your blog. This tutorial will give you an introduction to the “Image Post Format” and how it works for the Senses theme. There are many styles for post formats with different themes — basically no real standard, so many theme authors create their own styles and methods. For Senses, I do mine in a unique way that capitalizes on the “Featured Image” for your posts. When published, this is how it will look:

Create a Contact form like the demo site

This tutorial will be quite easy because to make the contact form shown on the live demo site for Senses, you simply need to copy some code.

The plugin I used for the form is the popular Contact Form 7. I will let you go through their documentation for setting up your form configuration, but for the form itself, this is the code you can use to get the layout I have on the demo:

Customize your Error 404 page

This theme offers you a nice custom designed Error 404 page that you can change the various elements within it. To give you a quick peek at the error page, here is a screenshot:

Create buttons and customize the colour

This will be a simple tutorial to help you make any text link as a button, including adding styling attributes such as colour and size. Current button styles for Senses are:

Create a banner like the demo website

When you see the live demo site for Senses, you will notice I have a banner image showing on the front page. This tutorial will help you to add one to your page like I did. Although there are a few ways you can do this, I will help you based on my method. There are plugins that lets you install an image or banner widget, allowing you to upload and set an image, but we are adding a caption box so this will require a text widget because we need to add some HTML code.

Custom Widget Styles

By default, WordPress does not offer any kind of widget styling other than plain basic looking widgets in a page. Unless a theme provides you with its own custom default styling, we are at the mercy of using a plugin to achieve this — which is actually a good thing.

Widget Styles for Senses

I kept the available styles to a minimum because of the design concept of Senses. However, you get to choice of using the default widget styling that comes with WordPress or you can use the custom styles I’ve given you which also includes colours.

Widget Style: Default
Widget Style: Border
Widget Style: Box
Widget Style: Search
Profile Style: Profile

Colour Styles

In addition to the widget styles you see above, you can also change the colours of them (with exception to the “Default” WordPress style) with the following colour classes in bold:

Dark = dark
Dark Green = darkgreen
Green = green
Red = red
Orange = orange
White = white (The default colour for the Box and Profile styles)
Search = search
Profile = profile

Install the Widget CSS Classes Plugin

To achieve the style results you see in the screenshot above, we need a plugin called “Widget CSS Classes” which when activated, adds a small text field at the bottom of every widget. In this field which gets labeled as “CSS Class”, we type in any of the classes I listed above in bold.

Go to Plugins >> Add New
In the Search field to the right, type in Widget CSS Classes, and then this should show up:
Click to Install and then activate the plugin

Adding a Style to a Widget

When you activate this plugin, it adds a small field to the bottom of each widget. All you need to do is type in the widget style of your choice, or simply leave it empty if you want to use the default WordPress style.

EXAMPLE: Lets use the “box” style with the colour “green“. When adding classes, make sure you leave a single space between each class.

EXAMPLE 2: Lets use the “search” style with the colour “white” for our search widget.

Changing the Default Colours

If you want to change the colours of the existing options, you can. You can also add more options if you are comforatble in creating CSS code. For these kinds of changes, you will need to override the theme’s stylesheet by creating a new custom one. This can be done by using a plugin that lets you do just that. Jetpack is one option if you use this already because it has an Edit CSS module you can activate. If you do not use Jetpack, you can use a plugin like “Simple Custom CSS” which is quite popular.

Please note that you should have some basic CSS knowledget in making custom changes to the existing theme styles, such as the widget styles provided in this theme.

Automatically create Grid thumbnails for the blog

The grid style blog layout option is a unique one and needs some attention given to your featured images. When using this optional layout for your blog, it’s important to make sure your grid stays nice and consistent where each post summary is the same size as the other. To give you an example, here is a screenshot where all the featured images are the same size:

Choose your blog style and layout

Changing your blog style is not just for layout, but also for what style of featured image you want. You get 4 blog styles, 8 with the pro version:

Use the WP Custom Header to customize your page header

Originally, the WordPress Custom Header feature was used to change the background header of themes, usually with a solid colour or image. Many themes now use it as another form of adding a banner image setup, but with Senses, I decided to go back to what it was really meant to be used for, customizing your header background. Senses gives you seveal options to consider: