Broadscope WordPress Theme” Documentation by “Kriesi” v1.0


“Broadscope WordPress Theme”

Created: 06/03/2011
By: Christian "Kriesi" Budschedl
Email: Kriesi

Informations about Updates and New Themes are always announced on Twitter and Facebook. Twitter updates are usually more up to date, Facebook updates are more detailed and easier to follow :)




Hello! First of all I would like to thank you for purchasing my theme! :)
If you have any questions that are beyond the scope of this help file, please feel free to ask your question at the support forum at http://www.kriesi.at/support/.

This file will teach you how to set up and use the “Broadscope” WordPress Theme.
This file is really extensive so you might think the theme is hard to use,
actually its not, you probably just might jump to the options page and explore everything yourself, this file is more of a reference work if you do not know what to do, or if you are not familiar to WordPress.

Have fun with your new theme! best regards
Kriesi


Table of Contents

  1. Folder Structure
  2. Installation
    1. Setting up the Theme Options
    2. Setting up Layout and Styling
    3. Setting up the default SLideshow Options
    4. Setting up the general Portfolio options
    5. Setting up the Contact form and Social Network Informations
    6. Setting up the Sidebar
    7. Setting up the Menus and Mega Menus on your site
    8. Using custom Widgets
    9. Adding Blog, Page and Portfolio (how to create entries and use preview images)
    10. The power of shortcodes
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. PSD Files
  7. Image Sizes
  8. Sources and Credits

A) Folder Structure of Broadscope and the Avia Framework - top

The Theme is built with WordPress best practices in mind, therefore it makes heavy use of the WordPress template engine. What exactly does that mean?

Whenever you see a php function call like this within your php files (get_template_part(), get_header(), get_footer() or get_sidebar() ) the theme retrieves a reusable code snippet, most of the time a chunk of code that is usable in many different files.

Folder structure:

 


B) Installation - top


You can either choose to upload the theme to your server via ftp (only upload the unzipped folder „Broadscope“ into the folder wp-content/themes/ ) or via WordPress upload function. to use the upload function of the WordPress admin panel make sure to ONLY upload the “Broadscope” folder and not the whole archive file that you received by themeforest.

Notice: if you are new to WordPress and have problems installing it you might want to check out this link: Solving broken theme issues
After that is done activate the theme as you would activate any other theme at Appearance->Themes.
“Broadscope default" is now the active theme and you will be sent to the Themes Option Panel immediately.

If you are new to WordPress and have problems with setting up the theme you might want to import the dummy content file that comes with the theme. You can import this file by clicking the "Import dummy data" Button of the Broadscope Theme options. The theme will then import some dummy posts and pages from the live preview. However you will still need to set some options on your own, like which page should serve as front page or how menus should be displayed.


B 1) Setting up the Theme Options - top

If you want to change the general Options of the Theme open the “Broadscope” Theme Options Panel (located in your admin sidebar) and click it, you will notice several tabs with options, which we will discuss now one by one.

Front page & Blog page
First of all you have to choose which content your front page should contain. You can either choose to display a page of your choice or if you dont select a page the blog will be displayed. If you choose to select a page you can then pick another page that will display your blog instead of the default page content. If you want to make the front page look like the one in the theme demo make sure you select a page and on that page select the "fullwidth template".

Logo
Next you can choose to upload your own logo. Make sure that the logo has the correct dimensions. If you need to embed a logo of different size you might need to edit the CSS files directly. We will talk about CSS best practices for the theme in a second after we talked about the last input field on the Theme Options page:

Google Analytics Tracking Code
Enter your Google analytics tracking Code here. It will automatically be added to the themes footer so google can track your visitors behaviour.


B 2) Setting up Layout and Styling - top

General Color scheme and CSS best practices
The theme has two default color schemes that serve as canvas for all further customization. You can either choose the light version or the dark.
Both CSS files are located in your CSS folder, however if you want to edit some of the styles it is recommended to not edit those files directly.

After you have chosen your default skin, if you want to make any further changes we highly recommend copying the style you want to edit and then paste it into the empty custom.css file. Here you can edit the style and it will overwrite the original rule. If you modify your theme that way you can later easily update to newer versions without being in danger of overwriting your changes, since we will never edit the custom.css file.

Primary & Secondary Color:
Those input fields allow you to choose a color for both the primary and secondary theme color. These colors mainly effect links, buttons and your main menus & sidebars list items.

Show Featured Area default image?
The featured area is the area located bellow your main menu. If you set one or more featured images for a post or page, these images can be displayed there. If you are currently viewing an overview page like the blog page, or a page that doesn't have any featured images this area can either be invisible or a color strip with a default image can be displayed. the theme comes with several transparent default images, if you want to use your own just upload them to the /images/default_headers/ folder on your server. 
You also need to choose a background color for that image that will stretch from one end of the browser viewport to the other.

Stretched or boxed layout
The stretched layout expands from the left side of the viewport to the right. The boxed layout will create a box around your content area that is approx. 1000px wide. if you select boxed you will get additional options for background color and image.

Heading Fonts
You can choose several fonts that will add a unique feeling to your site. The fonts you can choose are a selection of some of the google free web font archive and applied via cufon, so that windows and mac browsers will display them the same way.

Quick CSS
If you want to do minor changes to the css you can enter them here and they will be added to the css. If you want to do major changes we recommend you to use the custom.css file.


B 3) Setting up the default Slideshow Options - top

How should featured images be displayed by default?
If you define a feature image for a post or page it will either be displayed at the top of the post content or, as shown in my themes live demo on the front page, as a really big featured image within the featured area. Once you add more featured images to a post or page the will be grouped to a slideshow which also can be either shown just above the content or within the feature area. The first option here sets the default behavior (which can be overwritten for each post and page individually)

Further options for your slideshow are:
Active autorotation?


How long should each image get shown if the autorotation is set (or if the user clicked the automatic slideshow button)


And should the slide control elements be shown by default?

These are global options that are the default options for all pages, posts and also overview pages (like blog or category archives)
As said before you can overwrite each of those options individually when writing or editing a post or page.


B 4) Setting up the general Portfolio options- top

The first task when setting up your portfolio is to set the URI scheme for your portfolio single entries. The default is set to "portfolio" so for example if you create a new portfolio entry that should show your latest artwork WordPress will display the url as Http://yourDomain.com/portfolio/latest-artwork.

It is quite important to understand that you need to take care that the slug entered here does not interfere with other category slugs, otherwise WordPress will not be able to find your portfolio entries and simply display a 404 page. Sounds probably a little complicated but as a rule of thumb, if you just make sure that you got no post-category with the same name as the slug set here, no problems should occur.

Creating a portfolio page
Creating a portfolio page requires several steps. First of all you need to create a few single entries that contain whatever you want to show to the world :) This is easily done by clicking the "Portfolio Items" link in your admin sidebar and start creating new entries just as you would create new blog posts. Add Images, add categories and if you are done return to the Broadscope->Portfolio settings.

Now you need to set two options:
First of all which portfolio posts do you want to show on your portfolio page? SImply select the categories that hold the posts in the select box.
Then we need a page to display those items. Select this page from the dropdown menu and you are done. If you no save the options and head over to this page it should act as an overview page for your portfolio. The default page content wil be shown in the small sidebar beside your portfolio entries.

By clicking the [+] and [-] icons at the bottom right of the page you can create an unlimited amount of portfolio pages that contain different workpieces, based on the categories you select.


B 5) Setting up the Contact form and Social Network Informations - top

Setting up contact form and social information is a rather quick task: just select the page that should display the contact form and also select the email address that should receive the mails.

If you add your twitter account name or the link to your Facebook page or profile a social icon will be displayed at the top of your page and at the footer for either of them.


B 6) Setting up the Sidebar - top

Next step is to select those categories and pages that should get a unique set of sidebars. For every category or page choosen here the theme will add a new Sidebar Widget area at appearance/widgets. Once you have choosen the pages and categories press save and head over to the widget section of WordPress.

You will see that the new areas just got appended to the predefined ones.
So adding these areas is easy.

However be very careful when removing widget areas that already got widgets applied to them.
WordPress doesn't remember where it stores widgets by name, it stores this information by number. So if I would add a text widget to Contact (widgetarea Nr6 in the screenshot), and then delete the Contact widget area, the widgets would then be in Jobs. (previously in 7, now the new 6)


B 7) Setting up the Menus and Mega Menus on your site - top

The Theme comes with support for the new WordPress 3.0 Menu feature. Just open Appearance->Menu in your backends Sidebar and add a New Menu called "Main", then add to this menu whatever menu items you need. If no menu is created a fallback menu will get displayed that shows all pages and a home link.

The Theme also improves the WordPress 3.0 menu items with a few additional options that make it possible to easily create mega menus. A mega menu is a menu that shows all its contents as soon as you hover over the first link, other than normal menus which only show the items listed directly bellow this link. Mega menus also often got description text and images to help the user understand what choices he got when browsing the site.

Activating the mega menu is quite simple: just check the checkbox that gets shown for top level items. All items that are nested directly bellow them will then be converted to columns instead of links. these columns can then hold any number of links, and also text and images since the description field also accepts html code!


B 8) Using custom Widgets - top

The Theme comes with several custom widgets that let you display latest blog posts, latest portfolio entries or your latest tweets either in your sidebar or if used in conjunction with shortcodes also within your content area

The options are pretty much self explaining, the widgets are named "Broadscope Latest News", "Broadscope Latest Portfolio" and "Broadscope Twitter Widget"


B 9) Adding Content (how to create gallery entry and preview images) - - top

Writing a post, page or portfolio entry doesn't really differ from doing so when using other themes. You add a title, add some content, and categories and thats about it. In Broadscope you need to do a few more things:

If you want to create a blog entry, page or portfolio entry you got the possibility to add either a single featured image or multiple images that get converted to a slideshow:

When writing the post, scroll down; bellow the text-area you will notice a few extra fields: An option set to make the Featured images behave different from the default settings that we set previously at the Theme Options page. More Important you will find a form to add multiple feature images.

First of all just click the upload button and add upload your image to your web-server. Click the "Use image as Feature Image" button and a thumbnail will be inserted. You then can add a caption title and a caption text if you want to. When uploading a picture all different thumbnail sizes needed for the theme are generated by WordPress. However this only happens if you add new pictures. if you are using pictures that were already uploaded before the Broadscope theme was activated, WordPress cannot resize them.

Since sometimes you might want to display this image within your feature area you should set an appropriate background. You can try to use the auto detection feature if your server supports php image manipulation, otherwise you will need to set it manually. Last but not least choose were and if to set a link.

Clicking the small plus and minus icons at the right bottom of the page will let you add new feature images or remove old ones.


B 10) Using shortcodes - top

What is a shortcode and how do i use it?
Shortcodes are small text snippets that get converted by WordPress. As an example: Using shortcodes is very easy. To use one, create a new post (or edit an existing one), and in the the editor type a shortcode in brackets, such as:

[quote]This is a pull-quote.[/quote] 

to generate a pull-quote. Other example would be the use of shortcodes to create columns within your post:

[one_half first]Content here.[/one_half] [one_half]Content here.[/one_half] 
[one_third first]Content here.[/one_third] [one_third]Content here.[/one_third] [one_third]Content here.[/one_third] 
[one_fourth first]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] 
[one_fourth first]Content here.[/one_fourth] [three_fourth]Content here.[/three_fourth]
[one_third first]Content here.[/one_third] [two_third]Content here.[/two_third]

The theme comes with quite a few shortcodes that are easily accessible thanks to a visual self-explanatory user interface that is accessible by clicking the magic wand button when you write a post

Most shortcodes require you to enter additional information and then get generated by the theme on its own, starting from columns to content slider. You can also choose to nest various shortcodes. For example create 3 columns, and within each of them display a small slideshow. Or do it the other way round: create a single slideshow that slides multiple columns. The sky is the limit :)

Attention: Please make sure to always start new shortcodes on new lines. Most of the time you wont encounter any errors if you don't do that but unfortunately WordPress does mess up the html sometimes. This is true for all shortcodes but the inline ones like drop-caps buttons and icon links, those are the only ones that don't need a new paragraph.

In case you encounter odd behavior always make sure that all shortcodes are closed as expected. Also when trying to nest shortcodes please be aware that you cant wrap a shortcode with the same name around another one with that name: For example: [one_third first] [one_third first]Content here.[/one_third] [/one_third] would result in messed up html code since WordPress is not able to identify which opening tag belongs to which close tag. However what you can do is nest shortcodes within each other if they don't share a name. for example you could easily place a slideshow within a 3rd column tag. Just make sure to add new paragraphs between them ;)


C) HTML Structure - top

The Theme uses valid HTML 5 and comes with predefined classes for common elements needed in web design.
All templates share basic elements like header, footer, main, and entry so be carefull when editing those or adding/changing the CSS for those ids and classes :)

 


D) CSS Files and Structure - top

The CSS for the theme is split into various files: one that holds the basic markup for layout which is called style.css. We then got one file for the light and the dark sin in your css folder, as well as a shortcode css file. Last but not least we got an empty custom.css file which should be used by you to add your own modifications. Since we never touch the custom.css file when making updates you can easily update to later theme versions without beeing in danger of loosing stylesheet modifications.


E) JavaScript - top

The theme uses advanced jQuery functions. You do not need to know how to use jQuery to activate them, almost everything is controlled by WordPress. All the function calls as well as as the custom created jQuery plugins like the slideshows are located in the avia.js file.

Lightbox: a custom pretty photo skin

the lightbox gets automatically applied to links that contain images, youtube videos, vimeo videos, mov files and swf files. if you don't want to activate the lightbox on any of those links add the class 'noLightbox'. if you manually want to apply the lightbox to a link you can add the rel='lightbox' attribute to the <a> tag.

Better documentation can be found here:
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/


F) PSD Files - top

Among with the theme come all psd files needed to edit the different skins. With these psds you can even create your own unique Broadscope skin.


F) Image Sizes- top


'width'=>48, 'height'=>48 // small preview pics eg sidebar news
'width'=>230, 'height'=>80 // medium preview pic for archives
'width'=>243, 'height'=>125 // medium preview pic for portfolio
'width'=>574, 'height'=>200 // image for blog posts
'width'=>726, 'height'=>250 // image for pages
'width'=>978, 'height'=>99999 // big images for fullsize pages and mainpage slider. no height limitation

you can change these settings in functions.php. the theme will then create different thumbnail sizes according to your changes on upload. You might need to reflect those changes within your CSS file, depending on what you have changed ;)


G) Sources and Credits - top


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Kriesi

Go To Table of Contents