Back To Document ListBefore you install Preferential, it's important to know a few things before you begin.
If you believe you will be making any modifications to the core files of this theme, whether now or later in time, WordPress recommends you install a Child Theme which lets you make changes while maintaining the ability to keep your theme (the Parent Theme) updated without losing your changes. You can read more about child themes here:
Preferential helps you out by giving you a premade child theme that you can install. This is found in the original downloaded package with an installable preferential-child.zip theme file. You would simply install this like any other theme, then activate it. It's important to know that before you do this, make sure that the parent theme (Preferential) is installed. It's also important that you decide if you want to use this before you start making your site because if you use the child theme after you already did your widgets, menus, and theme options, you will need to redo them.
Preferential offers several features, but some require plugins if you decide to use them and should be considered as optional. You will need to download and install these because they are not included in the download of this theme. I do this so that everyone can choose which plugins they want to install, but it also ensures the most recent version of each plugin is installed.
To install plugins, you will go to:
Appearance >> Plugins >> Add New
Do a search for the name, click Install, and Activate.
Jetpack is a plugin that is made up of several plugins that you may find very useful because of what it has in it...a LOT of features. Since the release of version 3.0, I have to admit that Jetpack is actually quite the plugin because of what it can do. In fact, I built most of the demo site for Preferential using Jetpack. I did not use all the features, so I kept those deactivated, but the ones I enabled allowed me to do the following:
There are more that you can use depending on your own preferences. However, I would not use the Twitter one because it's not very good. For the twitter option, I used the one that comes with the Widgetkit Lite plugin (more on this later) becuse it does not use an iframe to load tweets and it looks a lot better.
If you are not using Jetpack already, I would recommend checking it out and try it because almost everything you need is in it, otherwise you will need to install several plugins to get what Jetpack offers. They did a very good job with this one...finally. If you install it, make sure you read up on their documentation and for support, you can refer to the Support tab on the plugin's page at wordpress.org
This theme uses the WordPress Customizer which is a feature WordPress offers you to make changes to your active theme. Every theme will load up within the customizer, but what will be different from theme-to-theme are the settings and options they offer. The customizer gives you a live preview window of your website, and within the left column, you will see a series of tabs, each labeled as to what they are for.
There are a few ways of getting to the customizer:
The two most common methods are from the dashboard home page and the menu under Appearance >> Customize
Video coming soon.
You will hear this often and this is something that WordPress recommends; but if you plan to make custom changes to your theme, whether mine or from someone else, the best way is to use a child theme. You can read more about child themes here:
The reason for using a child theme is because when updates are available for your theme, in this case the parent theme of Preferential, you won't lose any custom changes because they were done in the child theme. How this works is that the child theme inherits the styles and functionality of the main theme (the Parent theme), so any updates that happen, it will inherit those. However, if you made any custom changes to the theme, these exist in the child theme and not the parent theme, which is why when you update, you don't lose the changes.
Easy guideline for you:
When making core theme file changes with a child theme, this is done by copying the file from the parent theme and uploading it to your child theme, while maintaining the same file structure as the parent theme. So for example, if you wanted to modify the header.php file in the parent theme, you copy that file and upload it to your child theme to the exact same location as the parent theme.
Note:The child theme duplicates the same structure and layout as the parent theme.
Before you install the child theme, always make sure the parent theme is installed. It does not have to be activated, just installed, otherwise you will get an error.
Video coming soon.
This should be considered as optional, but I will explain and show you why I like to remove my WordPress media settings which are preset when you first install WordPress. If you go to:
Settings >> Media >> Media Settings
...you will see the following media sizes and other settings:
Now I will show you what it does by uploading 17 photos to my Media Library...
As you can see, WordPress will automatically generate thumbnails based on the settings (sizes) whether you want them or not. In fact, my media library went from 17 photos to a whopping 56! Why would you want to remove the settings? Because your hosting package has a certain amount of diskspace given to you, so if you upload a lot of images on a regular basis, that diskspace is going to get filled up fast and you will be billed by your hosting company for additional space requirements. Plus, if you keep regular backups of your site (as you SHOULD be doing), it means your backup files will continuously get bigger and bigger over time.
With the same 17 photos I uploaded, but removing each thumbnail size settings, this is what my media library now looks like:
If you notice in the first screenshot above, the Cropping and Organizing under Uploading Files are checked. I would also recommend unchecking both. For cropping, I prefer to do my own cropping for more control over what parts of the image are to be cropped.
For the Uploading and organization of your photos, I really cannot stand how WP organizes photos and other media. If you have a lot of uploads over a span of a year and you realize you need to find one to edit, good luck! Very hard to find with the 10's if not 100's of sub folders it creates. I prefer to have them go directly into the uploads folder -- all together.
Recommendation is to make each media size setting as 0 (zero) and uncheck both of the checkboxes. When you need an image for something, crop the image yourself, optimize it, size it, and then upload it.
If you would like to have one thumbnail size generated for a particular use and to maintain an easy way of having the same size for every photo you upload, you can change any of the settings to include the thumbnail size you want. So if you want a particular thumbnail size (that gets automatically cropped as well) for your blog featured images, you can decide on the size you want.
With Preferential, you get several logo options:
I recommend not using an oversized logo image so that you can maintain a consistent and quality look and style. I would also recommend making sure there is not too much extra space above and below your actual logo image, otherwise you will get a lot of empty space in your header area.
I've utlized the WP Header feature to allow the ability to customize the top header background area of the page. This is the top half part of your page background that sits behind the main content container and logo. You can use a solid colour or you can even use a background image.
In addition to customizing the top half of the page (the header area), you can also change the page background. Preferential does come with a default background which you can use, as well it's a transparent image which means you can change the background colour without losing the background image. Your choicces are:
Some people may opt in for a full sized image, or you can use an image and with the WP Background settings, tile it to how you want it.
Preferential offers you a couple website page widths:
You can change this width at any time, but I would recommend that you choose it right from the start. Also remember that this theme is responsive, so regardless of the page width you choose, as the browser window gets smaller, your page will automatically adjust.
Creating a custom front page and moving the blog further into your website is called "creating a static front page" which WordPress has a tutorial for this. However, I will give you a quick rundown of how this is done because most people will want this. WordPress by default will always put the blog on the front page, which is why a static front page is usually created because unless you are using this theme as a blog only, you will probably want to change this.
This theme offers two layout styles for icon boxes, the default centered one, as well a left aligned icon:
<div> etc.
This is an example from the first icon box on the live demo site:
<div class="pref-icon-box">
<div class="pref-icon-header">
<div class="icomoon icon-stack"></div>
<h3>Mobile Responsive</h3>
</div>
<div class="pref-icon-content">
<p>Using Twitter’s Bootstrap framework, you get a theme that is build to give you a responsive website that can be viewed on most mobile devices.</p>
</div>
</div>
This is an example from the first icon box on the live demo site:
<div class="pref-icon-box left"> <div class="pref-icon-header"> <div class="icomoon icon-stack"></div> <h3>Lorem Ipsum Delore</h3> </div> <div class="pref-icon-content"> <p>Donec nisi nisi, ornare vitae ligula quis, iaculis fermentum est. Integer sed tempor justo. Donec metus metus, condimentum at augue nec, posuere facilisis justo. Vivamus lacus purus, iaculis vitae iaculis eu, dictum sed ante. Nunc ut dui ac lorem molestie.</p> </div> </div>
WordPress offers several post formats that are made available through any theme as long as the theme has support for each one. Unfortunately, creating a custom post format is not possible, so we are limited to the following formats....the ones in red are not available in Preferential:
If you would like to read more about WordPress Post Formats, you can visit the Codex page:
If you would like to see the available post formats on a live site, you can check out the demo website for Preferential by going to the "WordPress" menu link and visit each submenu:
You do not have to use all the post formats that are listed above, but they are there for you if your website needs them. The Standard Post Format is probably the most common one because this is the default option when you write blog posts -- it's automatically set for that one. How you use the other formats is up to you. For example, you could use the "Quote Post Format" as a way to post client or customer testimonials. The Link Post Format could be used to create a type of link directory. The Status Post Format could be used as a way to publish quick updates to your site or other notations that you want to inform others of things that are happening.
Preferential gives you the ability to customize almost every colour within this theme. There may be some elements that you need to create custom CSS to manage the colours of those elements, but for the most part, you should be able to achieve unlimited colour combinations with your website with the built-in colour selectors.
There are many colour options throughout the theme option settings and can be found on different tabs within the customizer. For example, the one in the screenshot below is found on the Navigation tab:
By default, WordPress will show a widget on every page that the widget position exists on. In most cases when making a website, you don't want that widget to show on every single page, so the only way to manage where and what pages it should be on is to use a plugin. You have a few options available:
Preferential uses Jetpack on the live demo site and I enabled the Widget Visibility feature on it so I can use it to show widgets on select pages. It works extremely well and you can publish widgets to the available widget positions this theme offers. I did a tutorial about widget positions with an introduction about this topic:
Please also note the "Blog", "Single", and "Category - Archive" sections do NOT have the following widget positions available:
You can view this video in full screen.
This tutorial will help you make a gallery using WordPress. Although this is a common thing with any theme, I will show you how it looks with Preferential as your theme.
First thing you want to do is prepare your images ahead of time. I am one who likes to keep things consistent so that I get a nice gallery that is evenly displayed within a page, post, or text widget. This means preparing images by cropping, sizing, and optimizing photos before you upload them. If you were to create a gallery with different sizes of images and some are vertical while others are horizontal, you get a very uneven gallery layout...however, sometimes you may not have the option to make them all the same.
By default, WordPress will use the small thumbnail size, usually 150x150 if this is set in your Media Settings. Normally what happens with WP Media Settings, is that every time you upload an image, WP will generate a thumbnail of each of the sizes you set dimensions for. If you don't have these set, then you need to make sure your photos are the same size so that you can maintain a consistent layout. However, if you do have media settings in place, you can use a size attribute on your gallery short code (see further below).
To manage your gallery, such as thumbnail size, you can refer to the WordPress Codex documentation on how to edit your gallery shortcode:
Otherwise, while in your page where the gallery is, switch to the "Text" tab on your editor and add this to the shortcode:
size="medium"
Then click on Update to your page or post.
There are many ways to create a contact page, but the one thing hey all have in common is that they use a plugin for the actual form that people fill out. Normally I used Contact Form 7 as the plugin, but since I am using Jetpack in the live demo site for Preferential, I decided to give this a try and created this tutorial based on Jetpack.
For a basic form, it's very solid and we know it's coded well because it's from the developers over at Automattic (makers of WordPress).
Each contact form can easily be customized to fit your needs. When a user submits your contact form, the feedback will be filtered through Akismet (if it is active on your site) to make sure it’s not spam. Any legitimate feedback will then be emailed to you, and added to your feedback management area.
NOTE: Even though I am using Jetpack for this, you can still create this contact page and use any other contact form plugin such as Contact Form 7, Gravity Forms, or any other plugin to add to your page.
The Preferential theme comes with a preset of font based icons which gives you the flexibility to size and colour them just like you can with any font (text). This theme uses them for the social icons as well some of the HTML Snippets that you can use and change the icon from the large selection that comes with Preferential.
You can view the available icons by going into your download package of Preferential and then look for the folder named "icons". Inside that is a demo.html page you can view in your browser. In this icon folder, there are other items and files, such as a font file that you can install on your "Windows" computer so that if you use a graphics program with font capability, you can create mockups and other artwork using the font "icomoon" which is what the icons are.
There is also a file selection.json that allows you to go to the icomoon.io website and update the font icons by adding more or removing any you do not want. This file is like a backup of the font icons used in this theme.
You can use the icons in many ways, such as:
When adding an icon into your content, the WordPress editor is really finicky, so you will want to be careful how they are added, otherwise after you save the page or post, the editor will strip out the icon. I find the best way to add an icon is either:
<div class="icomoon icon-stack"></div>
Or with the <i> tag like this:
<i class="icomoon icon-stack"></i>
Always add the class "icomoon" and then add the other class for the icon you want to use, for example: icon-stack
NOTE: The WordPress editor does not like empty tags, which is why it will often strip them out, but the two above seem to work. So if the editor is stripping out one of the two options, try the other method.
You may have noticed the live demo site for Preferential showcases a portfolio that looks great when you want to display projects that you have done, whether for a client, or for yourself. The portfolio is not built into the theme for a very good reason...if you ever change to a new theme, you can keep your portfolio because it's not part of the theme. In this case, the porfolio is part of the Jetpack plugin. To show you what the portfolio looks like, or at least what I did for the live demo site, you can see it here:
The first thing you need is Jetpack, so if this is not installed, you need to install it so that we can activate one of the modules in it called "Custom Content Type".
The portfolio shortcode gives you the most flexibility in how you want your portfolio to show in your site. It also lets you use a standard page! Documentation for the portfolio shortcode can be found here:
We would recommend keeping it fairly simply for a clean layout. This is the shortcode We used for the live demo site:
[portfolio display_types=false display_tags=false columns=3 showposts=9]
We would recommend you use larger images for your portfolio featured images, so that when someone clicks through to see more about your project, they will get a nice featured image at the top of the page like this:
When you create your featured image, make sure you maintain the same size, orientation, and aspect ration for each portfolio featured image you use so that when you go to your portfolio, your layout is even by rows and columns and everything looks perfect in consistent size. The images I used for the live demo site were 800x533, although you can use what works best for your own portfolio. As for other photos, galleries, or even slideshows within your content, you can be a bit more flexible.
Please note that the process is same for as for the Pure & Simple theme so we've included video which we've made for Pure & Simple theme.
HTML Snippets are like mini-templates that you can use inside your page content and found in your theme package that you downloaded. Generally you have themes with shortcodes, but this theme uses HTML Snippets instead because they are true HTML compared to shortcodes; shortcodes can also be a bit confusing as well when you copy and paste them into your page (more on this in a moment). This theme currently offers the following snippets:
How you use these will be up to you, but for most of the snippets that relate to in-page elements like icon boxes, list styles, etc., these text files also contain some instructions which you may want to print off as a reference for each one.
You can view this video in a full window.
Preferential comes with a LOT of widget positions, many offer dynamic sizing which means you can have 1, 2, 3, or 4 widgets side-by-side. If you have 1 widget in a group, such as the Bottom widget group, your widget will automatically go 100% in width. If you publish 2 widgets, each one will become 50% in width, or if you publish 3, each one will be 33%, and if you publish 4 side-by-side, each widget will be 25% in width.
In total, you get 31 widget positions available to you. They are also available for every page template for more flexibility in layouts as each person will have different needs depending on the website they are building. For the blog sections of your website, you also get most of the widget positions available with the exception to the following positions which are NOT coded into the blog and category (archive) pages:
You can view the available widget positions here:
By default, WordPress will show a widget on every page that the widget position being used exists on. In most cases, this is not very good in terms of creating websites because you may not want a widget to show on every page. However, you have a few options you can consider:
Personally, I like the Jetpack option, second is the Display Widgets plugin.
Preferential includes a series of preset widget styles that you can use for almost all widgets. You get 7 widget styles included with Preferential, plus you get a preset of available colours, including one custom colour that you can set from the theme customizer. The current colours available are:
Although the styles are coded in the theme's stylesheet, you will need a plugin called "Widget CSS Classes" to apply the styles by using CSS classes in your widgets. When this plugin is installed, it puts an input field at the bottom of your widget where you type in the class for the style(s) you want for that particular widget.
For example, if you want a widget to use the "Halfbar" style, you would type in:
halfbar
If you want to add colour to it instead of the default grey, you can add a colour like this:
halfbar orange
To see the available widget styles and colours, check out the live demo site here:
With Preferential, you get several blog layout templates:
You get two featured image positions which will be dependent on the blog layout you choose and also the size of your featured image. You get a wide width position which places the featured image below the post title and above the post content. This position has a maximum width of 845 pixels when using a blog sidebar layout. However, if you opt in for the full width blog layout (no left or right sidebar), you can go as wide as 1140 pixels. For the small featured image position, this will float to the left of the title and post content.
You have the option to choose whatever sizes you want for your featured images, but here are a couple suggested guidelines:
When you upload your featured image, I recommend you have it cropped and optimized before doing so.
The live demo site for Preferential uses a free plugin called Widgetkit Lite and is available here:
Although optional, you can install this and take advantage of a bonus style (mini-template) for the slideshow that is included in your download package of this theme. You can find it in the "widgetkit" folder.
NOTE: I usually prefer a text widget to display the slideshow by pasting in the shortcode for the slideshow created. This is because the "Remove Widget Title" plugin does not work on the Widgetkit widget, but it does for the text widgets. Normally you don't want a title showing when displaying a slideshow in the header or banner area of a website.
By default, your images inserted into posts and pages have no styling. However, Preferential does include some custom styles you can apply to your images which give you a choice of:
To give you a better idea of what styles you get and how they look, you can check out the live demo site here:
This style adds a bottom border (bar) to your image:
When you insert an image, switch to the "Text" tab of your editor so that you will see the HTML image tag like this example:
<img src="image-path" alt="short description" width="300" height="200" />
We need to add a class to our image tag to first apply the custom style: pref-img-bar
<img class="pref-img-bar" src="image-path" alt="short description" width="300" height="200" />
You can also add colour to your bar style by adding another class to your image tag, such as grey: border-grey
<img class="pref-img-bar border-grey" src="image-path" alt="short description" width="300" height="200" />
You can add the following colours:
This style adds a border around your image:
When you insert an image, switch to the "Text" tab of your editor so that you will see the HTML image tag like this example:
<img src="image-path" alt="short description" width="300" height="200" />
We need to add a class to our image tag to first apply the custom style: pref-img-border
<img class="pref-img-border" src="image-path" alt="short description" width="300" height="200" />
This style changes your image into a circle and adds an outer border to it:
Before you insert an image into your post or page, this particular style required a squared image with equal width and height dimensions. For example, a 300x300 pixel image is ideal because this style gives you a perfect circle (round). If you had a 300x200 image, then your image will have an oval shape to it. Some people may want that which is your choice of course.
When you insert an image, switch to the "Text" tab of your editor so that you will see the HTML image tag like this example:
<img src="image-path" alt="short description" width="300" height="200" />
We need to add a class to our image tag to first apply the custom style: pref-img-round
<img class="pref-img-round" src="image-path" alt="short description" width="300" height="300" />
This plugin is considered optional, but to get the thumbnail layout of recent posts like the live demo website shows, you need a plugin called "Recent Posts Plus". It offers different layouts based on the settings you choose. In the original download of Preferential, you get a snippet of predefined settings you can use to match that of the demo site. To see this widget in action, you can check out the blog on the demo website:
Note: You can have different settings and layout per widget instance of Recent Posts Plus.
The category ID's in the settings I provided will need to be your own categories. The 1,2, and 3 category ID's I show are for my tutorial site. Make sure you separate each one with a comma. To understand more about the capabilities of this plugin, I recommend you refer to the developer's documentation for it.
You can enlarge this video for full screen viewing.
HTML Snippets are like mini-templates that you can use inside your page content and found in your theme package that you downloaded. Generally you have themes with shortcodes, but this theme uses HTML Snippets instead because they are true HTML compared to shortcodes; shortcodes can also be a bit confusing as well when you copy and paste them into your page (more on this in a moment). This theme currently offers the following snippets:
How you use these will be up to you, but for most of the snippets that relate to in-page elements like icon boxes, list styles, etc., these text files also contain some instructions which you may want to print off as a reference for each one.
You can view this video in a full window.