Setup Tutorials for Preference

If you would like to create your front page just like the live demo site for Preference, you can follow the setup with this tutorial. Please note there will be parts of this tutorial that links to others because they are related in this type of layout. I will also write this out so that it matches extactly what you see on the demo site. You will also want to make sure you have at least these plugins installed and activated: Advanced Text Widget http://wordpress.org/extend/plugins/advanced-text-widget/ Widgetkit Lite http://www.yootheme.com/widgetkit Dynamic widgets, or at least Widget Logic. Part 1 – Create Your Front Page (and Blog page) If you are setting up a new site and yet to create a static front page, you will need to do this now. Create a new page and call it “Welcome to Preference“, not “Home“. Then add your written content and insert an image 265×180 pixels, aligned…    read more 

Preference offers list styles (bullet lists) to give you more than a simple dot. To see Preference list styles in action, you can check out the live demo for this theme here: List Styles How to Style the Ordered Lists All you will need to do is apply a class to your <ol> when making lists, with the exception to the “Default” style which will just be a numbered list. <ol> This is the default list, no class needed. <ol class=”decimal-leading-zero”> This will give you a numbered list starting with zero (0) until it reached 10 or more. <ol class=”upper-alpha”> This will give you a list with Alphabetical letters in uppercase. <ol class=”lower-alpha”> This will give you a list with Alphabetical letters in lowercase. How to Style the Unordered Lists This is also done by adding a class to your <ul> when making lists, with the exception to the “Default”…    read more 

One of the great features about Preference, along with the help of a special plugin called “Widget CSS Classes” is that we can now control how our widgets look, not just by colour, but also by overall visual style. Looking at the demo website, you can see the different styles Preference comes with: Widget Style Demo These are styles that are already part of this theme, but you will need to download a plugin for this to work. Part 1 – Get the Plugin Go to Plugins >> Add New In the search field, type in: Widget CSS Classes Install and then activate this plugin In the left dashboard admin menu, go to Settings >> Widget CSS Classes Set the following options like you see here in this screenshot: Click Save Changes Part 2 – Widget Classes There are several styles avalable for your widgets, see the screenshot below: Each…    read more 

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 

In addition to the WordPress gallery that you can easily use, there are two problems that you may or may not notice, but when creating a gallery with the default shortcode method, you don’t get a nice overlay when you mouseover a thumbnail and you also do not get a nice lightbox. Although there is one awesome plugin called “Cleaner Gallery” that takes over the WP gallery and lets you apply a lightbox from a varied list, you still lose the ability of a mouseover as some people love. Note: You can use the Spotlight and Lightbox feature for single images as well. The list type gallery which this tutorial for Preference is about, gives you is something that looks like this…starting with the Spotlight feature of Widgetkit: As for the lightbox, well this is what it looks like with one style of many possibilities: This tutorial will cover the…    read more 

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 

In addition to having a front page showcase header, you can also use the separate Banner Header widget position to add photos or even sliders to your site’s inner pages, or perhaps get creative and setup section headings with a nice background. For Photos: Prepare your photo before you upload it to your Media Library with a recommended 1200 x 225 (height can be more) size for those with large monitors. For Sliders: You just need your shortcode available Note: Make sure you have the “Advanced Text Wdget” plugin installed because this is a very flexible widget that lets you disable the title output plus you can select where you want your widget to show in your site. In this case, we will be saying “Pages”. Upload your photo to the Media Library and copy the url path to the full size image Go to Appearance >> Widgets Drag an…    read more 

Most if not all the themes I’ve seen from others have portfolios which are popular if you need one. They are generally built into the theme with a custom post type which has to be coded into the theme by the developer. However, there are problems with this method: the custom post type is only available as part of your theme if you change themes, you lose it coding for the portfolio may become incompatible with future versions of WordPress coding may conflict with plugins harder to keep up to date I decided to make the portfolio a lot easier, stable, scalable, filterable, flexible, and more, all while taking advantage of what WordPress already gives you. You will need one plugin, but the advantage here is that it’s a plugin which lets you use it even if you change themes.  IMPORTANT: When creating your portfolio, it’s important you create a…    read more 

Preference uses the WidgetKit package from Yootheme.com for the slider, lightbox, and a spotlight effect when you hover over a thumbnail when you add a tag to the thumbnail link. This is the WidgetKit Lite version, although they do offer a Pro version, but we wil be setting up and focusing on the slider for this tutorial. Step 1 – Download and Install WidgetKit We need to DOWNLOAD the WidgetKit Lite package for WordPress Log into your WordPress dashboard and go to Plugins >> Add New >> and click the Upload option Browse for the downloaded zip file for WidgetKit and then install it, activate it… When done, you should now have a WidgetKit menu tab in the lower left side of your admin dashboard like this: Step 2 – Upload the Custom Preference Slider Template With Preference, you will find that the download package has a folder called “Extras”…    read more