Setup Tutorials for Preferential

Welcome to the Setup Tutorials for Preferential. These are the standard guidelines to help you install, configure, and customize your newly downloaded theme. If you have any requests for additional tutorials relating to this theme, please contact me and I will review your suggestions. These tutorials are also based on the assumption you have a basic understanding of how WordPress works.

Customize the colours for your website

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: Go to Appearance >> Customize >> Colours Click on any of the colour selectors and choose your colours Click on Save and Publish Screencast – Customize Your Colours  

Setup your social networking icons

Preferential comes with a large selection of available social network icons and a few other options that you can use. I’ve included most of the popular and common options where you can simply activate the ones you want to use and add in the links (URL’s) so visitors can check out your social pages. Currently, this theme offers: Twitter Facebook Google+ Linkedin Pinterest Flickr Youtube Vimeo Instagram Reddit Picassa Stumbleupon WordPress Github Dribbble Tumblr RSS Email When adding your URL’s to the social settings in the customizer, you need to include the full URL like this example: http://twitter.com/styledthemes Activate Your Icons Go to Appearance >> Customize >> Social Networking Go down the settings and enter in the full URL to your social profile pages Click Save and Publish If you need to temporarily disable your social bar, under the Social Networking tab in the customizer, you can check the box…    read more 

Introduction to Post Formats

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: Standard Post Format Aside Post Format Image Post Format Gallery Post Format Audio Post Format Quote Post Format Status Post Format Video Post Format Link Post Format Chat Post Format If you would like to read more about WordPress Post Formats, you can visit the Codex page: Post Formats 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: Demo Website You do not have to use all the post formats that are listed above, but they are there…    read more 

Change the width of your website layout

Preferential offers you a couple website page widths: Default Width – 1400 pixels wide Smaller Width – 1200 pixels wide 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. Set Your Width Go to Appearance >> Customize >> Basic Settings Select your option for the Page Width setting Click Save and Publish Screencast – Page Width  

Choose your blog Layout with a featured image size and position

With Preferential, you get several blog layout templates: Blog Full Width (no left or right sidebars) Blog Left Sidebar Blog Right Sidebar Blog with Left and Right Sidebar Featured Image Positions 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. Featured Image Sizes You have the option to choose whatever sizes you want for your featured images, but…    read more 

Create a custom front page and move the blog

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. Create a Home Page Go to Pages >> Add New Title this as “Home Page” and if you are putting in content, you can do that now or later Select the page template you want to use, but if you want to make a page like the live demo site, select the “Page Full Width” from the page templates drop down list Click Publish…    read more 

Customize the page background

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: Using the default background Upload and use your own background Use a transparent image with background colour Or just have a background colour without an image 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. Transparent Image with Background Colour Go to Appearance >> Background You can upload your own or keep the existing transparent image Click on the colour selector for your background colour Click Save Changes Image Background Go to Appearance >> Background Click on…    read more 

Customize the top header background 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. Background Colour Go to Appearance >> Customize >> Colours Find the Top Half Background setting and click on the colour selector Choose the colour you want and click Save and Publish Background with an Image Go to Appearance >> Header Choose File (your image file) to upload (Suggested width is 2560 pixels. Suggested height is 450 pixels.) and click Upload You can crop the image to your liking, otherwise you can skip the cropping if you made your image the size you want before uploading Save it Background with a Transparent Image and Background Colour Go to Appearance >>…    read more 

Setup your logo

With Preferential, you get several logo options: Default Logo – you can use this as design reference to make your own if you wish Your Logo Logo with Title and Tagline Text Title 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. Go to Appearance >> Customize >> Site Title & Tagline Select one of the options for your logo Upload or drag your logo into the dotted area if you are using your own logo options Click Save and Publish Screencast – Choose Logo

Create your menus

When you first install Preferential, you may notice you have no menu showing. This tutorial will help you create a custom menu which is by far the better solution and most flexibile. The Main Menu Go to Appearance >> Menus >> create your first menu by titling it in the Menu Name field as “Main Menu” or whatever you wish to call it. Click the Create Menu button Now you can begin adding menu items to your new menu Under “Menu Settings“, select “Primary Menu“ Click Save Menu The Footer Menu Go to Appearance >> Menus >> click on the text link at the top area “Create a new menu“ Name your menu “Footer Menu” or whatever you wish to call it and then click the Create Menu button Now you can begin adding menu items to your new menu Under “Menu Settings“, select “Footer Menu“ Click Save Menu Note: You…    read more