You just purchased BranfordMagazine and want to make a quick start? Thanks to the themes optionspage and this installation guide, setting up BranfordMagazine for the first time is pretty easy. Here I explain it step-by-step.

Download, Unpack and Upload

After you downloaded and unpacked the zip-archive, you have a folder called PRiNZ_BranfordMagazine_pro. This folder contains two more folders, the readme files in English and German and a logo.

Now take only the folder branfordmagazine-pro not the whole PRiNZ_BranfordMagazine_pro folder and upload it to your WordPress themes folder which is normally located at /wp-content/themes in your servers WordPress installation. If you upload the whole unpacked PRiNZ_BranfordMagazine_pro folder you might encounter several issues (like “missing stylesheet”). You will need an FTP program to do this.

Do NOT use the WordPress theme installation functionality for that. The installation functionality tries to upload the whole zip-archive and will create errors.

Setup the Theme Options

Now go to your WordPress admin and open the themes options under Appearance > Branfordmagazine Options.

At this options page you need to make some settings to make the theme work properly. You might encounter issues if your settings are incorrect. So double-check your settings if you face any issue.

Colors

Select from many different color schemes. The “default” scheme ist the one you see in the themes demo. If you select one of the other color schemes (e.g “green”) and use the option to display a logo instead of blogname and description (see next paragraph) always the default logo will be displayed and this logo doesn´t change even if you change the color scheme. Assuming you will use your own logo anyway it wouldn´t make sense.

In addition to the color schemes you can change some colors for the background of the featured articles and the leadarticle. I will surely add some more color options in a next update.

Header and Footer

In this section you select if you want to use the blogname and description text that is defined in your WordPress settings or a graphical logo in the header of your site. Default is blogname/description and if you want to use a logo image you need to upload one by using the WordPress “Header” option under the Appearance menu.

The alternative Footer provides four additional widget areas that you can use to put additional content in four columns at the footer of your site. If this is switched off you will just see the regular footer with the credit links. The  4-column footer in the demo is the alternative footer.

Navigation Menus

The theme offers two menu locations in the top menu bar. You can use both or only one to display a menu for pages, categories etc. Be aware that you need to create a custom menu and assign it it to the location in the theme. First you need to check the box(es) and then you need to create a custom menu.

Since WordPress 3.0 there is a powerful functionality available called “Custom Menus”. You find this under Appearance > Menus. With this custom menus you can create very flexible menus, you can mix pages and categories, add external links and define your own order of menu items completely independent from the WordPress defaults. See also this screencast that explains the custom menu function in detail.

There are two areas (or locations) where custom menus can be put. The primary menu is the top menu and the secondary is the menubar right below the primary.

Homepage Layout Options – Leadarticle

The leadarticle is the most recent newsarticle displayed in the tabbed area of the homepage. You need to select the the category you want do show here from the dropdown menu. It makes sense to create for example a “news” category and use it for the leadarticles only. If there is no article assigned to this category, nothing can be displayed.

Customizing the Tabbed Section

Presumably you want to customize the tabbed section as well. Under “Homepage Tabbed Section” you can change tabs or add new tabs and enter text or HTML. You cannot use PHP Code here because that´s not allowed by WordPress for security reasons. If you need to use PHP code here you need to edit the code file directly.

Homepage Layout Options – Featured Articles

The featured articles are the articles (three by default) in the left column of the homepage. They are taken from one specific category, typicallly called “featured articles” (or whatever you like) which you have to setup first or you assign a category that already exists. Again you need to select the category from the dropdown and enter the number of post to show (default 3 posts). And remember: If there is no article assigned to this category, nothing can be displayed. If you use the same category for the leadarticle and the featured articles it might make sense to define an offset to the featured articles section. An offset of “1″ for example means that the articles start to display not with the first but with the second article. Makes sense if the first already is the leadarticle.

Homepage Layout Options – Homepage middle Column

In the middle column of the homepage all other categories that you define are displayed. Always the most recent article from the categories will be displayed. Enter the IDs of the categories separated by a comma (e.g. 3,5,7,8,9). You can also change the number of articles to dislay per category but I reccomend to leave the default (1).

There is a plugin that makes it easy to find the correct IDs

Images

Here you can define the dimensions (width and height in pixels) of the various images on the homepage and the archive pages. This works only if you use the TimThumb image resizer script.

You can also define if you want to use TimThumb or the default WordPress Post Thumbnail (featured image) function.

If you don´t use TimThumb and need to change image dimensions this plugin might become very handy.

And you can switch the prettyPhoto image lightbox effect on or off. The image size function is a very powerful feature that allows you to change the image dimensions whenever you like. Thanks to the TimThumb image script all images are croped and scaled “on the fly” and can be changed as often as you like. Imagehandling has never been so easy. The settings effect the images of the leadarticle, the featured articles , the hompage right colum (categories) and the archive (category overview) pages.

Be aware that you only have this great flexibility if you use TimThumb (tick the box to use it). If you don´t use it for some reason, you can use the bild-in WordPress post thumbnail / featured image function. If that´s your choice you need to set a featured image in every post you write. There is a very detailed tutorial about the WordPress featured image function written by Justin Tadlock here.

Setup the Sidebar

Here you can remove the newsblock and the “Stay informed” RSS Links. You can also define how many newsheadlines are displayed on the homepage sidebar. The newssection shows a number of headlines from the same category that you set as the leadarticle category. There is an offset of 1 which means that the list starts with article 2 from this category. If you have only one article in this category it will show this article as the leadarticle but no other article will appear in the list of news headlines. If you have two articles in this category the first one (most recent) will be the leadarticle and the next (older one) will appear in the list in the sidebar.

Anything else can be setup with regular or the custom widgets that are included with the theme.

Setup the 3-colum Page Template

The 3-column page is a special template to display content from three different categories in a very prominent way. Take a look at the demo and see how it can look like. All relevant settings can be made here. See the tutorial to this template for more details.

Custom Scripts

Here you can enter custom scripts to the header and footer like Goolge Analytics or other Javascripts. And you can use custom CSS for simple editing of fonts, colors etc.

Troubleshooting

Installation Error

Do NOT use the WordPress theme installation functionality to install your theme. Always use FTP to transfer the theme files to your server. The installation functionality tries to upload the whole zip-archive and will create errors.

No Categories

Make sure you use correct category IDs otherwise you will see “no categories” where you expect the name of a category (e.g featured articles)

How to remove the double “Continue reading…” below the Leadarticle

If you encounter a “Continue reading…” link twice below your leadarticle in the tabbed section and want to get rid of one of them just tick the box in the themes options “Homapage Tabbed Section”

Images do not show up

If you have issues displaying the image thumbnails on the homepage have a look at this tutorial that shows you how to use images. Another tutorial which can be found here, deals with potential issues with the image handling script. Don´t worry: there is a solution in 99,9% of all cases.

No articles appear

The reason why no articles appear for example in the lead article area is because you have no articles in that category. Once you write an article it will apear. So always make sure your categories have articles.

It´s quite a good helper to write e.g. 3 testarticles and assign them to each category. That gives you a good overview how it works.

Further Readings and Tutorials

• How to use images on the homepage
• Use Widgets in the Sidebar
• Changing the Logo
• More Tutorials
• FAQ

Before you get started with “Freelancer” to setup your website you must do some initial settings. The theme provides many different options you can choose from. Using these options will take your WordPress powered website further.

Download, Unpack and Upload

After you downloaded and unpacked the zip-archive, you have a folder called PRiNZ_Freelancer. This folder contains two more folders, the readme files in English and German and a logo.

Now take only the folder freelancer not the whole PRiNZ_Freelancer folder and upload it to your WordPress themes folder which is normally located at /wp-content/themes in your servers WordPress installation. If you upload the whole unpacked PRiNZ_Freelancer folder you might encounter several issues (like “missing stylesheet”). You will need an FTP program to do this.

Do NOT use the WordPress theme installation functionality for that. The installation functionality tries to upload the whole zip-archive and will create errors.

Setup the Theme Options

Now go to your WordPress admin and open the themes options under Appearance > Freelancer Options.

At this options page you need to make some settings to make the theme work properly. You might encounter issues if your settings are incorrect. So double-check your settings if you face any issue.

Colors

Select from several different color schemes. The “default” (blue) scheme ist the one you see in the themes demo. There is not much to say about this feature because it´s pretty simple. If you choose “green” the green color scheme will be used. If you make any changes to the CSS rules of the theme you need to make them in the colorscheme stylesheet that you use because all style informations are stored there.

Header and Footer

In this section you select if you want to use the blogname and description text that is defined in your WordPress settings or a graphical logo in the header of your site. Default is blogname/description and if you want to use a logo image you need to upload one by using the WordPress “Header” option under the Appearance menu.

You can also remove the searchfield from the navigation bar e.g if you want to use a search widget in the header or sidebar.

The alternative Footer provides four additional widget areas that you can use to put additional content in four columns at the footer of your site. If this is switched off you will just see the regular footer with the credit links. The grey 4-column footer in the demo is the alternative footer.

Navigation Menus

The theme offers two menu locations in the top menu bar. You can use both or only one to display a menu for pages, categories etc. Be aware that you first need to create a custom menu and assign it it to the location in the theme. First you need to check the box(es) and then you need to create a custom menu.

Since WordPress 3.0 there is a powerful functionality available called “Custom Menus”. You find this under Appearance > Menus. With this custom menus you can create very flexible menus, you can mix pages and categories, add external links and define your own order of menu items completely independent from the WordPress defaults. See also this screencast that explains the custom menu function in detail.

There are two areas (or locations) where custom menus can be put. The primary menu is the top dark-grey menu and the secondary is the lighter grey menubar right below the primary.

To get the result you see on the demopage you need to setup two menus (I called them “pages” and “cats” but you can call them whatever you want). Then you need to assign menu-items to the menus and you need to “tell” WordPress which menu should be displayed in which position. In the demo the menu called “pages” is displayed in the area “Primary Menu” and the menu called “cats” is displayed in the area “Secondary Menu”.

Homepage Layout Options

The homepage layout options allow you to switch on or off almost any area on the homepage. If you don´t need it, switch it off. You can play around with it to see the effect of ticking or unticking the checkboxes. If you decide to use the punchline which will be displayed right below the slider/leadarticle you also need to enter a text for the punchline of course.

Click to open full overview

Leadarticle and Image-Slider

First you need to decide if you want to use a slider or if you want to use an article from a specific category with a headline, text and image. You can select between two sliders (WP-Cycle and Nivo).

If you go for Nivo Slider (which is very nice) you need to install the plugin which is located in the themes download folder unter /Stuff/Plugins. This plugin is huge and has many functionalities. After you have installed the plugin (like any other WordPress plugin) find a “Nivo Slider” menu item in your WordPress admin. Here you need to make several settings (details below).

If you need a very simple image slider you can also use WP-Cycle. You need to download the plugin at the WordPress plugin repository and install it. Then you find a sub-menu item under the “Media” menu item of your WordPress admin.

You can also decide not to use a slider at all. Instead you can use static content (headline, text, featured image) from a category (maybe called “Leadarticle”). Select the category here.

Any category selection expects that this category already exists. Otherwise it will not be in the list.

Basic setup of the Nivo Slider

If you use the Nivo slider you first need to set up a slider for the homepage. You can setup more than one sliders and use them in pages and articles as well by using shortcodes. This plugin is very feature rich and works perfect with the Freelancer theme. For detailed information about the Nivo slider WordPress plugin see the Nivo slider website.

When you enter the Nivo slider settings you need to add a new slider if no one exists. It´s a bit like adding a new WordPress post. You need to enter a name for your slider (for identification) and make some additional settings. You can choose if you want to just show images or images from posts from a specific category. If you choose “category” as the image source you need to have a category for that purpose that has posts and those posts need to have featured images. Sounds complicated but it isn´t. If you decide for the “manual” setting you can upload images directly to the slider. You can order them later by drag&drop.

Click to open full overview

Set “Nivo Slider Freelancer Theme” as the sliders theme. The image size will be fixed to 960×290 pixels. The images must be at least of that size. Larger images will be resized and cropped. Smaller images will simply be too small. All other settings are totally up to you. Try them and use whatever you prefer or leave them as they are.

When you´re finished save the slider. Below the “Save” button (top right) you will find a box called “Using this Slider”. This box contains the required shortcode. Copy this code (for example [ nivoslider slug="default" ]) and go back to the themes options page. Now paste the shortcode into the “Nivo Slider Shortcode” field on the options page.

Home Middle Section

There are no specific settings on the options page for the 3-column section that comes right below the image slider. This is a widget area and you need to use widgets to display content here. The best way is to use the custom “Featured Page” and “Featured Post” widgets that are integrated into the theme. Just go to Appearance > Widgets and play around with the widgets.

Setup the homepage bottom columns

In the lower area of the homepage two columns (left, right) with different categories are displayed. Here you can define which ones. In every column you can define as many different categories and number of posts per category as you like. Just enter the IDs of the categories seperated by commas and the number of post taken from each category. I reccommend one post per category.

There is an alternative and very flexible method to display your stuff in this area also. Instead of using a category to display the most recent posts from each category you can use the fantastic featured page or featured post widgets instead. Go to the Widgets area under Appearance and you will find two widget areas for the homepage called “Homepage Bottom Left” and “Homepage Bottom Right”. Here you can put the featured widgets. They have various options to play with. Just try it.

Images

Here you can define the dimensions (width and height in pixels) of the various images on the homepage and the archive pages. This works only if you use the TimThumb image resizer script. You can also define if you want to use TimThumb or the default WordPress Post Thumbnail (featured image) function. And you can switch the prettyPhoto image lightbox effect on or off. The image size function is a very powerful feature that allows you to change the image dimensions whenever you like. Thanks to the TimThumb image script all images are croped and scaled “on the fly” and can be changed as often as you like. Imagehandling has never been so easy. The settings effect the images of the leadarticle (if you don´t use the image slider), the featured articles (only the height because of the layout), the hompage bottom colums and the archive (category overview) pages.

Be aware that you only have this great flexibility if you use TimThumb (tick the box to use it). If you don´t use it for some reason, you can use the bild-in WordPress post thumbnail / featured image function. If that´s your choice you need to set a featured image in every post you write. There is a very detailed tutorial about the WordPress featured image function written by Justin Tadlock here.

Portfolio Page and Blog Page

The portfolio page and the blog page are page templates that can be assigned to a page and display specific content. The portfolio page can be used to show some of your recent work, or clients. The blog page is obviously a page that you can use as your companies blog on your website.

For both pages you need to define the categories. The portfolio page requires just one category (maybe you like to call it “Portfolio” or “Clients”). The blog page can display one or more categories in a regular chronological order.

If you want to use one of those templates create a page (not a category or post) and assign the template to this page. You don´t need to enter any content (But you can if you want to write an short introduction for example). The regular content will be taken from the categories that you set.

The portfolio page will display the images and headlines of the posts of the category that you use for your portfolio. Let me give you an example how I did in on the demo page. Each of the portfolio items you see is an article (a post) within the category called “portfolio”. The portfolio page template takes the post from here and displays the image and the title of the post on the portfolio page. When you click on an image it will open in larger size using the prettyPhoto lightbox effect. Pretty nice and very easy to do.

Custom Scripts

Here you can enter custom scripts to the header and footer like Goolge Analytics or other Javascripts. And you can use custom CSS for simple editing of fonts, colors etc.

Troubleshooting

Installation Error

Do NOT use the WordPress theme installation functionality to install your theme. Always use FTP to transfer the theme files to your server as explained in the beginning of this article. The installation functionality tries to upload the whole zip-archive and will create errors.

No Categories

Make sure you use correct category IDs otherwise you will see “no categories” where you expect the name of a category (e.g homepage bottom column articles)

Image Thumbnails do not show up

If you have issues displaying the image thumbnails on the homepage have a look at this tutorial that shows you how to use images. Another tutorial which can be found here, deals with potential issues with the image handling script. Don´t worry: there is a solution in 99,9% of all cases.

No articles appear

The reason why no articles appear for example in the featured article area is because you have no articles in that category. Once you write an article it will apear. So always make sure your categories have articles.

It´s quite a good helper to write e.g. 3 testarticles and assign them to each category. That gives you a good overview how it works.

Nivo Slider Issue

If you get error messages like

Error: File doesn't exist: /.../html/wp-content/uploads/2011/12//image1.jpg

from the Nivo Slider then you are victim of a very rare problem with some hosters. The guys at the Nivo Slider forum (the guys who created the plugin) are working on it and I will add a solution as soon as it is available. If you can´t get it working I recommend to use the WP-Cycle slider.

Further Readings and Tutorials

• More Tutorials
• FAQ