Setup Tutorials for Preference Lite

Welcome to the Setup Tutorials for Preference Lite. 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.

Change the Submenu background

December 24, 2013 |
|

Because Preference uses CSS 3 gradient backgrounds for the submenus (and a couple other in-page elements), using the theme customizer for this is not really possible, so we have to use an online tool for this. You can still achieve a customized look and style for your submenus, but we have to do a little extra work here. By default, the theme’s styling for the submenus (and menus) are found in the theme’s /css/ folder. However, to access these styles, you will need an FTP program to open them because WordPress doesn’t show these in the admin’s own theme editor (not sure why they made this inaccessible). The file is found here: /wp-content/themes/preference/css/menu.css The class for the gradient is found around line 60 and looks like this: .mainmenu ul li:hover > ul { /* second level half rounded */ The actual styling is handled by this batch of code: background-color:…    read more 

Customize your theme colours

December 24, 2013 |
|

One of the best features of Preference Lite (all my themes) is that you can modify the colours of almost every element within your page(s) with a colour selector that is already part of WordPress. I simply added more colour selector fields based on what elements you can change to suit your own preferences. Go to Appearance >> Themes >> click on the Customize text link Click on the Colors tab in the left column For each item, click on the select field which opens the colour selector and move the circles around until you find the colour you want You should be able to see the colour changes take effect in the preview window to the right When happy, click on Save & Publish and then Close Move on to the next colour item  

Create a Static Front Page and Move the Blog inside

December 24, 2013 |
|

For anyone running a simple blog, you may want your blog to stay on the default front page which is what WordPress does when you first install it. However, for anyone wanting a “Static Front Page” and to move the blog inside the site, this is easy to do. Part 1 – Create a Home Page and a Blog Page Go to Pages >> Add New Title your new page as “Home” or whatever you want If you plan on adding content, you can add it to the editor Select the template you want to use with the selector at the far right Click “Publish“ Now we are going to create another page, so click “Add New” again Title this page as “Bog” or whatever you want Leave the editor empty with no content and you won’t be choosing a template here (which is standard with WordPress) Click “Publish“ Part…    read more 

Using the WordPress Custom Header

December 24, 2013 |
|

Part of WordPress includes a “Header” feature that lets you upload and crop photos that you can use in a header of your page. Before in the past the header would have the site title and description on top of it and you were able to change the background of it. Well things have changed and advanced to a point that you can use the header in many ways, whereas for Preference, you get to use it as a type of showcase banner for your pages…normally used for the “Front Page” only. How to Find the WP Header Feature First, there will be two methods you can work with the WP Header feature: The first is clicking on the “Header” link in the left panel in your dashboard under “Appearance“. When you are in your dashboard, this is going to be the fastest way of accessing the setup of your…    read more 

Customize Your Showcase, Banner, and Header Area

December 24, 2013 |
|

Preference Lite (and Pro) lets you customize some styles relating to the Showcase, Banner, and Header area (WP Header) of your page with a set of options for changing colours, backgrounds, and paddings. Although the showcase, banner, and header are sharing the same space, you can achieve a slightly different style for each one, primarily for the Showcase and Banner, as the Header is actually one that shares both spots. Showcase Style By default, there is a background and padding set for the Showcase Header which looks like this (with an image added) screenshot: The padding is the space that is shown around the image, but it also shows the background image that is used for this area which also has a background colour. Change the Showcase Padding Go to your Home Dashboard Click on the big blue button labeled “Customize Your site” or you can go to Appearance >>…    read more 

Create a Custom WordPress Gallery

December 24, 2013 |
|

The default gallery shortcode that is part of WordPress is extremely limited and getting a good looking gallery in conjunction of working with WordPress thumbnails is a nightmare because there was not enough thought that went into this available feature. However, with Preference, I did a little extra customization for those who want to use the default WordPress gallery in their website by stripping out the built-in styles they use and opted in for my own. It’s not perfect but it still looks good without the need of a plugin. Prepare Your Photos As I will keep saying this on all tutorials relating to images, prepare your images by cropping, sizing, and optimizing your photos before uploading. If you followed the recommendation I gave about clearing out the dimensions from the WordPress settings for Media, there should be one thumbnail size that gets created with a 255 x 170 pixels…    read more 

Customize your page background

December 24, 2013 |
|

Preference Lite comes with a split page background where the top half is a solid colour (white) and the bottom half uses a combination background colour (grey) and transparent pattern image. In addition to this, the main content floats on top of this. However, you can change the backgrounds for the top and bottom half, although this will be done in three parts because one uses the WordPress background function, while the other (the top half) uses a theme custom option.   Part 1 – Let’s Change the Top Half First Go to Appearance >> Themes >> Click on the tab labeled as “Colours“ Find the setting for “Top Half Page Background” colour (default is white #ffffff) and click on the colour selector to open the colour palette Find the colour you want and see it in real time in the right window as you move the colour cursor around….    read more 

Setup your own logo or website title with description

December 24, 2013 |
|

With Preference Lite, you get the option of having: Default logo Your own logo Site Title and Site Description (set in h1 and h2 tags respectively) Right now the default logo looks like this: Setup Your Own Logo Create your logo in your favourite image program like Photoshop, Illustrator, or other, and save it as a jpg, png, or gif format Go to Appearance >> Themes >> click on Customize Click on the Site Title & Tagline tab on the left side Select the “Your Logo” option, at which point the preview window will now show the default logo gone Click on the Your Logo dropdown and then browse, then choose your logo you created to upload. After a few moments, your new logo will be uploaded and the preview will show it Click Save & Publish at the top then “Close“  Setup Your Site Title and Description  Go to Appearance…    read more 

Setup your main menu and other menus

December 24, 2013 |
|

Preference Lite comes with one (1) menu, although the pro version comes with three (3) predefined menus for you, but with Preference Lite, you can create more as you need them. Before you create your menus, you will have what is called a “fallback” menu which means when you install WordPress, you will get a basic menu of pages showing like this: Again, I will assume you know the basics of WordPress, but I will go through the setup for this theme. Setup Your Primary Menu Go to Appearance >> Menus In the “Menu Name” field, type in what you want to name your menu, for example, Primary Menu and then click the “Create Menu” button Then in the left side, you should now see a box that is labeled as “Theme Locations“. In the Primary Menu setting, select the menu you just made and then click “Save“ Now you…    read more 

Let’s get some Plugins so we can do what the Demo Site does

December 24, 2013 |
|

In most cases, themes from developers are often filled with a ton of plugins that are coded directly into the theme. Although great and convenient, there is a major caveat of doing this…several actually: The theme gets bloated with code Your theme might have plugins you will never use or want to use The plugins and scripts coded in the theme may not play nice with other third party plugins The plugins and scripts may not be compatible with upcoming versions of WordPress The more scripts and code, the more chances bugs and other problems will show up Benefits of Keeping Plugins out of Themes The user can choose what they want to use You get a much lighter theme (less code) More stable theme Much easier to update plugins than if they were coded into the theme Updates are left to the developers of the plugins If you change…    read more