SelfTitled • Documentation


This documentation is to provide you with essential information to get you started with installing and setting SelfTitled up and running.

If you still have any questions about the theme, please feel free to ask me via the dedicated support forum only. You can also watch the video training dedicated by a loyal client Marco Lacaria

Video Tutorials Theme Support

1.1 - About SelfTitled

Developed by:

Online Demonstration: view demo

Developed by:

Current Version: 3

Last Update: Dec 16, 2013

Documentation Version: 2.1.0

1.2 - Files and Folders

You have these files and folders after downloading SelfTitled:

Assets: This folder contains the followign files:

  • Capital Plugins: The plugins can be installed and activated upon theme activation. You can manually upload them on any theme from the assets folder too.
  • All the images used on the demo theme, plus their licenses.
  • icons used for the main navigation
  • contains the PSD files for Module icons, module badges and socual icons
  • dummy-content.xml to import into your theme if you want.
  • theme-options.txt to import demo theme options. the ready to install and the latest version of SelfTitled theme the exact offline version of this documentation use this as a refernce of all 590 icons available for the theme.

1.3 - Before Theme Instalation

before installing SelfTiltled please consider the following requirements:

Files and assets:

  • Dummy Content: In order to populate your wordpress installation with exactly the same data found of the theme demo you need this XML file. All you have to do is to use wordpress import tool.
  • Plugins: I have developed three plugins that comes along with this theme. Capital WooCart, Capital Product Slider and Capital Shortcodes. You can install these plugins automatically upon theme activation.
  • PSD files: The pas files contain open layer files for badges, Widget (module) icons and social icons. The png file for menu icons are also included.
  • Widgetkit SlideShow Styles: This file icludes 6 styles to add to Widgetkit plugin to help you make 6 different types of sliders, icluding FullWidth Slideshow, ads slider, testimonials slider, sidebar slideshows etc.
  • Assets: This file contains all the images used for blog posts and also the fullwidth slideshow. Image credits are included within.
  • License and Documentation: The license of this theme and it's plugins, plus the documentation files that you are reading right now.

Theme Requirements:


In order to set this SelfTitled theme up and running you will need the lasted version of WordPress (3.5.1 at the time writing this documentation) and it should be installed on selfhosted site. Read this article → to learn how to install wordpress on your host. Read this article → to learn more about WordPress requirements.


This theme is designed for WooCommerce to help you build a self hosted eCommerce (online store) website. Teaching you how to use woocommerce is beyond the scope of this documentation, but you can find a good series of training on wp.tutsplus here → or you can read WooCommerce official getting started artice here → to get to know better about woocommerce requirements and more.

You need WooCommerce 2.0+ and it is recommanded to use the lastest version. There is an older version of this theme included which supports WooCommerce 1.6+

1.4 - Installing SelfTitled

You have 2 methods to install SelfTitled:

1) Uploading via WordPress admin:

  1. On your WordPress admin panel browse to appearance → themes
  2. Go to the Install Themes tab
  3. click on Upload link on the secondary nav underneath the tabs
  4. Click on the chose file button, and browse for file in your downloaded files.
  5. Choose that file, and click on the install now button.
  6. Once the theme is uploaded and you see Theme installed successfully message, all you need to do is to click on the activate button, or you can optionally activate it on your appearance → themes page.
  7. You should now have SelfTitled in your themes, Right next to Twenty Twelve and Twenty Eleven.

    SelfTitled installed

  8. After activating the theme, you will see a message on top of almost every page on wordpress admin, informing you of the plugins required and recommended for SelfTitled theme.

    SelfTitled installed

  9. Congratulations, You have now successfully installed and activated SelfTitled.

2) Uploading via FTP:

You might preffer to upload your theme via and FTP client, or maybe your host has limmited the max upload size and you can not use WordPress theme upload functionality to upload and install SelfTiled.

In this case you will need and FTP client application. Filezilla → and Cyberduck → are some the most popular and free applications to handle FTP file transfer for you for both mac and PC.

I use FileZilla, it is easy to use and learn, all you need to do is to log in to your host with the FTP (ftp host, username and password).

Once you are loged in browse for wwww or public_html double click on it, just like when you open a folder on your own PC. Now, browse for the folder where you have installed installed your wordpress. double click on it and from there browse for wp-content → themes. now all you need to do is to unzip and drag and drop selftitled folder into your ftp client application right inide wp-content → themes. wait till the upload is finished. Then go to WordPress admin → appearance → themes and activate the theme just like you did in the previous chapter.

Of course you can upload the theme with your CPanel. In that case browese to the same folder you used for FTP access, upload the zip file and when the uploasing is finished right click on it and decompress (uzip or extract) it on the fly. you can remove the ziped file from your host after you have unzipped it.

1.5 - Installing the Plugins:

The plugins Are:

  • WooCommerce (Required): WooCommerce is a powerful, extendable eCommerce plugin that helps you sell anything. Beautifully.
  • Capital Shortcodes (Required): You will need this plugin to have many of the features you see on SelfTitled demo, like tabs, accordions, contact forms, video embeds and so on.
  • Capital Product Slider (Recommended): With the help of this plugin you can add a nice ploduct slider widget to your theme with lots of controls and options to customize it.
  • Capital WooCart (Recommended): This plugin creats a drop down cart widget for WooCommerce, designed and styled for SelfTitled and any other themes.
  • Breadcrumb NavXT (Recommended): Adds breadcrumb navigation showing the visitor's path to their current location.
  • Widgetkit (Recommended): The next generation toolkit for WordPress to enrich your website experience. The lite version included with this theme contains: Slideshow Widget, Lightbox, Spotlight, Twitter Widget, Media Player. find out more about Widgetkit here.

You have two options to install the required and recommended plugins.

a) The Easy way:

plugins the easy way

As stated before, upon theme activation, you can see an alert message on almost every page of WordPress admin, asking you to install the required and recommended plugins for SelfTitled.

To install these plugins all you need to do is to click on Begin installing plugins on the message and browse to the page where you see the list of these plugins.

Plugins List

Check the plugins you want to install, from Bulk Action drop down select install and click on the apply button.

The plugins would start installing on your WordPress, wait a bit for it, WooCommerce and Breadcrumb NavXT would be downloaded from wordpress repository right into your WordPress installation.

Capital Shortcodes, Capital Product Slider, Capital WooCart and widgetkit are aleady shipped with your theme. (you can find them in the lib folder in your theme root folder.)

All the plugins would be activated automatically after installation except for Breadcrumb NavXT, you can optionally activate it manually or press on dismiss this message to get rid of plugin activation nagging.

Once WooCommerce is activated you will see a message asking you to install WooCommerce pages. Please leave it as is for you will need it when you want to import the dummy content.

install woocommerce pages

b) The HARD way!:

You can optionally install the plugins manually, installing and activating plugins is almost like installing a theme, you can upload it via plugins → add new and search for the plugins you want (if the plugin exists in the WordPress plugins Depository), or you can browse for plugins → add new → upload and upload the zip file of the plugin from your hard drive, just like what you did with the theme. Or you can even use an FTP client and upload the plugins unzipped folder (or zipped folder if you are using CPanel to upload the plugin, you should unzipp it on the server using cpanel). If you want to use this method your plugins should be uploaded to wp-content → plugins folder on your wordpress installation on your server.

1.6 - Image sizes for WordPress and WooCommerce

WordPress image sizes:

To get the images and thumbnailes to be exactly like the demo theme you need to browse to Settings → Media and set the image sizes as follows:

  • Thumbnail size: 950x450 (with crop thumbnail option turned on)
  • Medium size: 350x300
  • Large size: 1024x1024

WooCommerce image sizes:

To have sharp iamges for your WooCommerce products, you need browse for WooCommerce → Settings → Catalog. Scroll down almost to the bottom of this page where it says Image Options and set the image sizes as follow:

  • Catalog Images: 300x300 (with crop ON)
  • Single Product Image: 600x600 (with crop ON)
  • Product Thumbnails: 100x100 (with crop ON)

If you are installing this theme on an already functioning WooCommerce website, you will need to install Regenerate Thumbnails Plugin from wordpress plugins repository.

After installing and activating Regenerate Thumbnails plguin, set the image size according to the boxes above and browse for tools → Regenerate Thumnails, click on regenerate button and wait for it to resize all the images for you.

1.7 - Importing The Dummy Content

On your downloaded files, browse for assetsdummy-content.xml

With this XML file you can import all the pages and their contents, all the blog posts, and all the WooCommerce products that you can see on SelfTitled demo. You can optionally import all the images used for blog posts, slideshows, products and images embeded in some the pages on the demo theme.

To import the dummy Data browse for Tools → Import and on the list click on WordPress.

WordPress Import

If this is the first time you are clicking on this link, it is going to install the WordPress import tool on your theme. Click on WordPress and wait for the Install importer popup to appear. On the popup click on the Oraneg button saying Install now.

When the installation is finished and you see the Successfully installed the plugin WordPress Importer ... message click on Activate Plugin & Run Importer link to activate and run the importer tool.

You should now be on Import WordPress page.

Click on Choose File button and on your hard drive where you have stored the SelfTitled downloaded files browse for assetsdummy-content.xml, select this XML file and press enter.

Now click on upload file and import button.

assign authors

Pay close attention to this part.

On this page you have two options to take care of. First, you need to assign an author to posts and contents being imported. By default they are assign to CapitalH the author of the theme, so if you leave this part untouched all the posts and contents would be imported under my user name and you will have to reassign them manually on each and every post, page and product.

To change this situation you have two options. 1) You can create a new user on the fly and assign all the posts and products to this user by filling in the input field where it says create new user with login name:. 2) You can assign them to an already existing user by clicking on the drop down menu and selecting and already exisiting user (admin should be on the list by default).

Pay close attention to this part too.

The Second Option on this page where it says Import Attachments is where you choose whether or not to import the images and other files attched to the posts and pages. If you plan to use the images I have used on the theme demo it is very important to check mark the Download and import file attachments option. If that is NOT the case for you just leave this option unchecked.

I suppose you check Download and import file attachments option. Now click on submit button.

This might take a while so go grab yourself a cup of coffee, and prepare yourself for the fun parts. The boring part is about to finish.

If everything goes according to plan you should now see the following message:

WordPress Import Done

Guess what? it's time to click on the Install WooCommerce Pages to get rid of this message. I hope you have not skiped this message before.

If you have skipped this message before or for whatever reason the message is gone for good, please navigate to WooCommerce → Settings → Pages, now set the pages as follows:

  • Shop Base Page: Shop
  • Terms Page ID: Terms & Conditions (Optional, if you want a terms agreement on checkout page)
  • Cart Page: Your Shopping Cart
  • Checkout Page: Checkout
  • Pay Page: Checkout → Pay
  • Thanks Page: Order Received
  • My Account Page: My Account
  • Edit Address Page: Edit My Address
  • View Order Page: View Order
  • Change Password Page: Change Password
  • Logout Page: Logout (Optional, if you want a logout link on your sites menu)
  • Lost Password Page: Lost Paasword

During the import process you might see some notices, errors and other types of messages. there could be lots of reasons for this but these are the most common ones:

  • Nothing is imported at all: in this case either the host where selftitled demo theme is on, is down, or you have problems with your internet connection, in each of these cases, you need to wait a bit and try again later.
  • Some of the postes/products/pages are not imported: this happend only when a plugin like woocommerce is not installed and you import and XML file which contains WooCommerce products. You can ignore these messages and continue with your theme, but you have manually add products to your WooCommerce.
  • X Page/post already exists: Some times wordpress duplicates some pages or post while importing or exporting. Just igone this message, all your pages/posts/products are now added to your WP installation.

Final step: Navigate to Settings → Reading. Set front page displays to a static page and for Front page: choose Home and for Posts page: choose Blog.


Are You ready for the fun part? Lets Rock this Theme! ↓

2.3 - Setting up the Front Page

Now the only page that does not look like the demo theme right now is the home page. DO NOT PANIC please, this is going to be both easy and fun. The reason the home page in not set up like the demo theme is that the front page of SelfTitled relies manily on widgets. How? so lets make one to see how. This will take LESS THAN HALF AN HOUR.

Your homepage looks something like this right now:

Homepage Before

Alright, lets head over to Appearance → Widgets and clean up some wordpress mess.

By default, Wordpress adds some pre defined widgets to the first available widget position upon theme activatation, that's why the home page looks wrong. In order to clear this mess, all you need to do is to remove all the widgets from search widget position, all except search widget. Looks like WordPress got this one right.

Homepage Before

Now, take a look at the home page, we are not done yet, but at least the header looks right, RIGHT?

Adding the Top Menu, User Menu and the footer menu:

On your wordpress admin, browse for Appearance → Menus, click on the plus button to add a new menu, name it top menu, or whatever suites your needs. Now, add some links to it, just like yous did whith the main navigation, hit save.

Now, click on the plus button once again, name the new menu user menu, and add two custome links, name the first one Login, and the second one Register. Fill in the URL fields like this:

  • Login: /wp-login.php
  • Register: /wp-login.php?action=register

Hit save on the top right corner. After Saving the menus, head over to Appearance → Widgets once agian.

You can optionally add one more menu as the footer menu, I just used the Top Menu for the footer too because I am a bit lazy :)

On the widget positions on the right, scroll down to find toolbar-r and toolbar-l click on the toolbar-l title to open it up. now scroll back up and on the available widgets on the left look for Custome Menu widget, drag it and drop it right into toolbar-l position, give it an optional title (the title would not be displayed on the front end, so just name it for referencing.)

On the Select menu dropdown select Top Menu (One of the menus we just created) and hit save.

Now click on toolbar-right widget position to open it up, and do exactly as you did with toolbar-l. Add a custome menu widget, name it for referencing (eg. Use Menu) and on the dropdown menu select User Menu and hit save.

On Appearance → Widgets srcoll down to the bottom of the page and on the right side find foore-l and footer-r, Click on footer-l to open it up, scroll back up, grap custom menu widget and drop it right into footer-l position, give it a name, like, footer menu. On the drop down list select top Menu or the menu you created for the footer and and hist save.

Perfect. Refresh your homepage, now you can see the top menu bar.

Adding the Footer CopyRight:

It's very easy. Click on footer-r widget position to open it up, scroll back up and on the left, look for Text (Arbitrary text or HTML) widget. Drag it and drop it into footer-r postion, and add your copy right text into it's textarea. On the demo theme I have added this code into it

COPYRIGHT © 2013 <a href=""></a>

Take a look at this chart → to find out how to add copyright sign and other needed signs to your Text widgets.

Addign Capital WooCart Widget:

If you have installed and activated Capital WooCart plugin, you will have a widget with the same title on your Appearance → Widgets, just drag it and drop it into Cart wigdet position on the right.

Adding The Rest of home widgets:

Lets add the rest of the home widgets, all but The Main slideshow which we will get into it very soon.

First Lets take a look at our available widget positions and their position on the front end of the theme

Right Now we have occupied the following positions:

  • Toolbar Left
  • Toolbar Right
  • Menu (occupied by the main nav automatically)
  • Logo
  • Search
  • Cart

We will fill in the desired widgets, then we will dig into styling them and customizing their layouts.

Slideshow (slideshow)

Assuming that you have widgetkit installed and activated and already created the fullwisth slideshow, head over to Appearance → Widgets, on the positions on the right panel fine slideshow position, click on it's title to open it. From the widgets on the left find Widgetkit widget and drag it right into slideshow position. give it a title for refrencing and from the dropdown menu choose the full width slideshow we created in the previous chapter. Save the widget and you are done.

Top A (top-a)

I am going to assume that you have Capital Product Slider plugin installed and activated, and also you have at least 5 products created by WooCommerce. If you have not imported the dummy data and you have no idea where to start adding products with WooCommerce please read this artcile → and then add at least 5 products and the come back and go on with this documentation.

Just drag and drop capital product slider widget into the top-a widget position, change it's title and save the widget before doing any other changes.

Now from the long list of available options choose what seems to suites you better, or leave everything untouched and go with the predefined options.

Tip: some times the color picker does not work, if that's the case for you, after saving the widget, just refresh the page and go back to the color picker, now you can customize the color of the navigation handle on your product slider widget.

Product Slider Options

Don't worry about how the widgets look like now, we will learn how to style the widges in the next chapter.

Top B (top-b)

Top B

These are the widgets on this position:

  • Top Selling
  • Latest Products
  • On-Sale

These three widgets come pre installed with WooCommerce, all you need to do is to add the following widgets to the top-b widget position:

  1. WooCommerce Best Sellers
  2. WooCommerce Recent Products
  3. WooCommerce On-Sale

I set Number of products to show: to 5 products, but you can change the number if you want.

Our home page is beginning to get shape, lets move on to the next level.

Bottom A (bottom-a)

Bottom A

For this widget position we only have 2 widgets.

  1. Testimonials Slider (a widgetkit slider)
  2. Our Latest Videos (A shortcode created using Capital Shortcodes plugin)

1) Testimonials Slider:

Just like how you added the main slider, just drag Widgtkit widget in to bottom-a widget postion, give it a name, and from the dropdown menu choose the testimonial slideshow we created in the previuos chapter.

2) Our Latest Videos:

I am going to assume that you have Capital Shortcodes plugin installed and activated on your theme. To add the video widget, just drag and drop a Text Wiget into bottom-a widget position and insert the follwing shortcode into it:

[video site="youtube" id="UX7GycmeQVo" w="100%" h="220"]

site could be one of the following:

  • Youtube
  • Vimeo
  • Yahoo
  • BlipTV
  • Veoh
  • Viddler
  • DailyMotion

While the ID is the video ID taken from the video hosting site. Width is set to 100% to make the video responsive.

We will talk about Shortcodes later on. Now just Save the widget and you are good to go.

Bottom A Widgets

Bottom B (bottom-b)

On this position we have 3 widgets:

  1. Widgetkit Twitter Widget (installed with widgetkit plugin - requires cURL on your server)
  2. Flickr Images (a text widget with a shortcode inside it)
  3. Ads Slideshow (a widgetkit slideshow)

1) Assuming that you have installed and activated widgetkit, you now should have a widget called Widgetkit - Twitter, just drag this widget and drop it right into bottom-b widget position. Here is a list of twitter widget features:

  • Filter tweets by hashtags, words, from users, to users, referencing users
  • Block tweets using a blacklist
  • Tweets are cached for high performance
  • Tweets show up even if Twitter is not available
  • 3 different styles to show your tweets
  • Responsive design to fit all device resolutions
  • Built with HTML5 using article and time elements
  • Works with Joomla and WordPress

Give it a title, set the options and hit save. For the homepage I have set the widget like this:

2) Assuming that you have installed and activated capital shortcodes plugin, just drag and drop a text widget into bottom-b position and give it a name like: Latest From Flickr, and insert the following shortcode in it:

[flickrbadge count="8" display="latest" size="s" source="user" user="52617155@N08" tag=""]

While count is the number of images shown, display is date of images (latest, random) size is the size of the images (s)quare which is cropped, (t)humbnail and (m)edium are available source is source of the images and could be set to user,user_tag,user_set,group,group_tag,all and all_tag. user is the ID of the user whom you want to display images and tag is the flickr photo tag and it's optionail.

3) And finally the last widget on our homepage is a slide show for advertising, which we made via widgetkit, so just drag and drop widgetkit widget into bottom-b positon, give it a name, from the drop down menu choose the slideshow we created for ads slideshow.

At this stage we are done with the content displayed on our home page. Lets go to the next chapter to learn how to customize their styles.

2.4 - SelfTitled Widget Options

Widget Options

Lets dig into the Real Power of SelfTitled, part of it actually.

As you can see in the image above you can custimize every aspect of a widget in SelfTitled. Now lets style our home page widgets.


Use the image above to reference the styles of the Main Slideshow.

Top A:

Right now, contains only Top A widget, so just set the options as follows. (keep in mind that you can style them as you wish and this to duplicate what I have done on the homepage.)

  • Title: show
  • Style: Blank
  • Icon: none
  • Badge: none
  • Display: Frontpage

Top B

Contains three widgets, Top selling, latest products, On-Sale

I have used the same settings for all three of theme except for the badges, the settings are as follows:

  • Title: show
  • Style: Paper Stack
  • Icon: none
  • Badge: Top (for Top selling) / New (for Latest Products) / Sale (for On-sale)
  • Display: Frontpage

Use the following image to reference different widget styles: (click to enlarge)

Widget Styles

Bottom A

We have added two widgets to this position, Testimonials Slideshow, Our Latest Videos, the settings are as follows:

Testimonials Slideshow:

  • Title: Show
  • Style: Blank
  • Icon: none
  • Badge: none
  • Display: Frontpage

Our Latest Video:

  • Title: hide
  • Style: Blank
  • Icon: none
  • Badge: none
  • Display: Frontpage

Bottom B

On SelfTitled demo theme, we added 3 widgets to this position, Latest Tweets, Latest From Flickr, Your Ads

The Settings for these widgets are as Follows:

Latest Tweets:

  • Title: Show
  • Style: Blank
  • Icon: none
  • Badge: none
  • Display: Frontpage

Latest From Flickr:

  • Title: Show
  • Style: Paper Stack
  • Icon: Photo
  • Badge: none
  • Display: Frontpage

Your Ads:

  • Title: Hide
  • Style: Blank
  • Icon: none
  • Badge: none
  • Display: Frontpage

Congratulations, You have now set up A HomePage, and as you might have noticed, with the power of Widget Options, You can have many possible styles and layouts, SKY is the limits.

We will dig into even more options in a bit.

3.0 - FrameWork Options

SelfTitled comes pre-loaded with a series of framework options. The following is a breif introduction to these framework options:

Framework Optiuons

The following are from Offical Warp Docs →

  • General:

    The general section allows you to edit the "global" settings of your website: Set the default theme profile, allow dynamic profiles, show a browser upgrade message to someone still using a IE6 browser or add your personal Google Tracking Code.

  • Compression:

    You can combine, minify, cache and compress (gzip) style sheets and JavaScripts of a theme automatically. Further you can enable the Data URIs feature which allows you to include images in the CSS so there are no extra HTTP requests required to load them.

  • Social Buttons:

    You want to promote your content on Twitter or Google+? Just enable Social Buttons in the theme settings and every article will get Twitter and Google+ buttons to share with others.

  • File Verification:

    The file verification feature helps you to easily keep track of all modified theme files. With just a click it can tell you exactly which theme files have been modified or deleted, even a few weeks or months later when you might have forgotten that you have changed something somewhere! To prevent modified files when using FTP, make sure the transfer mode is set to binary.

  • System Check:

    The system check gives you a rapid overview of critical and potential issues like writable cache folder, php version etc. so you can handle errors faster.

  • Profules:

    A profile can define different settings which are sorted into three main groups: Style, Content and Layout. You can create new profiles, edit already existing ones and assign them to any menu item. Yes, you read it right. Assign any profile to any menu item directly from your theme configuration with just a few clicks. That's not all, profiles have the ability to inherit defined settings from the default profile. This way you can easily make small changes or tweaks and apply them to a page or section of your website!

  • Style Settings:

    The style settings are all about the overall look and feel of your website you can choose from the different styles, colors and fonts.

  • Content Settings:

    This settings group lets you change content related things like date or the to-top scroller. It also allows you to hide the main system output, this is really great if you want to build a page which only uses modules or widgets!

  • Layout Settings:

    The layout settings panel is all about the theme's sizes and positioning! You can set the overall width and the sidebars' width and ordering as well. Also the module layouts can be set here, as we have mentioned before you can position equally sized modules right next to each other or stack them on top of each other.

3.1 - Getting to know Profiles


A profile is a custom set of theme settings which can define the style, content and layout of your site. The default profile defines the default settings for the entire website. You can create new profiles and assign them to any menu item. This allows you to load different theme settings on different pages.

New profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. One example where we use the profiles are the different theme variations we deliver with each theme. Also special module layout behavior is done using profiles.

Offical Warp Docs →

The Default Profile:

In the general theme settings you find a parameter called Default Profile. Here you choose the profile which will be loaded on all your pages. By default it is set to the profile called default. Each theme has a default profile and it can not be deleted. If you want to load another newly created profile as default for all your pages you can select it here.

Profiles can also be loaded in the frontend of your website by adding a parameter to an URL. For example index.php?profile=myprofile. We use this feature for example to load the different theme variations by clicking on a link on the website. But if you don't need this it should be disabled. This can be done by setting Dynamic Profiles to No, right below the Default Profile parameter.

Creat a new Profile:

New profiles can be created in the profile theme settings by clicking on Add and entering a name for your new profile.

Below you can see all settings you can control and override with your new profile. By default all values are inherited by the default profile.

To add new values or to select different options than the default ones, you first need to activate the override with the checkbox on the left.

If you later decide, that you don't want to override one of the default values any longer, simply uncheck the box.

Manually created profiles can be renamed, deleted and assigned to different pages.

Assign a Profile to a page:

One of the major features is the ability to assign different profiles to different pages. This allows you to change the theme's style and layout only on certain pages.

To assign a profile to a single or multiple pages, click on Assign Pages and select the pages you want to load your new profile. You can select multiple items by holding Ctrl-Key while clicking.

Please note that you can only assign one profile per page. If you have already assigned a profile to a page, it will be displayed in grey color and can't be selected.

If you have not imported the dummy data, there is a slight possibility that the default profile has the default style.

The defauly style comes pre-styled with the framework, and looks nothing like the demo theme. So just set the default profile's style to Capital-Styles or Capital-Boxed.

3.2 - Our HomePage Profile

Home Profile

ALright, lets get back to our business again. As you can see in the image above (click to enlarge) I have created a profile for my home page and overridden two things in it:

  1. System Output is set to no.
  2. Bottom A Layout is set to Double

1) System Output is the content published on a page via the visual editor of that page. So here On my home page I optionally decided to have no system output and only use the widgets for more felxibitly. You can of course leave it unchecked and go with another layout and design strategy.

2) Bottom A Layout is set to double. Why? Remeber the widgest we added to bottom-a positon? The left widget is our Testimonial slider, so I give more space to this widget by setting it's position layout to double. Take a look at the following image (click to enlarge)

Bottom A Layout

An example of a STACK layout is slideshow widget position, and an example of EQUAL layout is top-b postion where we have added latest products, top selling products and on-sale products next together.

If you have not imported the dummy content you may not have FrontPage profile set up for you. To add one for your theme, do the following:

On your WordPress admin browse for SelfTitledFramework OptionsProfiles

Next, click on Add and on the dialog box assign a name to your new profile. click OK and you have now a new profile added to your profiles list.

If you have just added the profile then it would be selected by default, if not, just find it on the dropdown list and selet it to change it's settings.

Leaving the check boxes unchecked means you want to inherit this setting from the default profile.

Now all you need to to on your new profile is to first of all assign this profile to a page (you can select more than one page by CTRL clicking the pages on the Assign Pages drop down), so just click on Assign Pages and select Frontpage from the list to assign it to the hompage. Now, scroll down and check system output and then set it to no, scroll down a bit more and check Bottom A Layout and set it's layout to double. That's it. Easy Hah?

If you creat a profile and not assign it to any page, it will work just like the default profile and might override it.

To avoid any conficts, use the default profile for overal settings and assign pages to other profiles to override the default settings.

4.0 - Theme Options

Theme Options

Important: to get the background and font styles customization, you need to first import the theme options using option tree menu or copy the content inside dynamic.css.txt and paste it into the Dynamic CSS field on your theme options general settings section.

To give you even more options, I have added more options, to further customie the theme, these options include:

  • General Settings: General Theme settings, like custom logo, favicon, custom CSS (plug dynamic css)...
  • Colors & Background: All color and background related setting, like buttons, main background, header background...
  • Typography: Choose between preloaded and OS defined fonts or Google Webfonts to customize all the available texts.
  • Shop Settings: More WooCommerce setting to customize the look and feel of your shop related pages.
  • Slider Options: Your options to customize the main slideshow on the homepage.
  • Social Icons: Options to customize the fancy social icons. Set the position to right or left and customize the links.
  • Capital TopBar: The built-in TopBar (foobar) used on the front-end. You can also turn it on or off.

If you have purchased and installed the theme before it's upgrade to version 2.1 and you have used the theme options to customize your theme, Make sure you disable the options auto load before activating the theme.

Theme Options are pretty much self explanatory, Every option has it's description infront of it. So just be bold and head over to Appearance → Theme Options and customize the look and feel of your theme. There some point to keep in mind though:

Dynamic CSS: This option is important if you decide to customize anything CSS (style) related, options like, colors, background, fonts etc. depend on dynamic.css so you will need to enable it on the General Settings tab first and insert the content inside dynamic.css.txt (you can find it in your theme's root folder), just copy all the content inside dynamic.css.txt and paste into dynamic.css text area on general settings tab on your theme options. You will also need a file on the roof folder of the theme (should already be there) and it should be named dynamic.css and it should also be writable (set the permison to 777 using your cPanel or FileZilla.) Just right click on the file after the theme is installed on your server, and set the permission to 777.

Google WebFonts: In order save bandwidth and optimize the overal load time of your website, google webfonts are disabled by default.

In order to enable Google WebFonts just click on enable google webfonts checkbox. save the options and you can see all the new fonts loaded for you.

As you can see by enabling Google WebFonts, you can have 30+ more fonts than the embeded ones.

Theme Options Layouts:

You can creat your own set of options layouts. Doing so helps you save your current styles and settings in one layout and start playing around the settings and save them in another layout to see which one suites you best, this way you can easily switch between different settings without actually affecting your default settings.

In order to do so, just enter a name in the New Layout field and press the blue button on the top left corner of your theme options panel. Then hit Save settings (the black button on the top right corner.) This will save all your default settings that you presently have. Creat another layout and save it, then with the new layout selected from the layouts drop down, start playing around with the options and save them all in your new layout. Hit save. Now all you need to do to switch between these layouts is to select the one you want from the layouts drop down and hit save settings button.

5.0 - Adding new Pages

Add New Page

Adding new pages on SelfTitled is just like any other theme. Browse for Pages → Add new, give your page a title and hit plublish to save and publish your new page. Now you can add this page to your menus.

5.2 - Contact Us Page

Creating the contact page is very easy. On your wordpress admin browse for Pages → Add new, Name it Contact Us, or whatever suites you.

On the visual editor of the page add the following shortcode:

To add the Interactive Google Map

[googlemap width="" height="" src=""]

Insert your width height into the shortcode. You can copy and paste the source link from google maps.

To add the Contact Form

[capital-contact email=""]

Just insert your email address and you have a nice and working contact form on your page.

5.3 - FAQ Page

The faq page is made just with accordion shortcodes ↓ and a tab shortcode inside one these accordions. Just creat a new page and name it FAQ or whatever you like, and use the visual shortcode editor to insert accordion shortcodes. Here is the code used on the demo theme.

6.0 - Shortcodes

Capital Shortcodes

Assuming you have installed and activated Capital Shortcode Plugin you now have a red button above all the visual editors for your posts pages. Make sure you are on the visual mode on your editor, and click on the Capital Shortcodes button to load the visual shortcode editor loaded via AJAX.

Using the visual shortcode editor you can easily insert and customize the shortcodes to your need, without memorizing the shortcodes and just by filling in the loaded for each shortcode.

Here are the shortcodes just for referencing:

Contact Form

Google Maps

Tag Cloud


Accordions (Colapsibles)

You can creat each colapsible separately, like what you see in FAQ pages.

Buttons (10 colors, 3 sizes)

Culomns (22 layouts)

Using this shortcode you have 22 different layouts, just keep in ming every column set has to end with a last column, for example:

[capital_columns column_type="one-third"] Column Content [/capital_columns]
[capital_columns column_type="one-third"] Column Content [/capital_columns]
[capital_columns column_type="one-third-last-column"] Column Content [/capital_columns]

secure email address

Here is how your email address looks like in the source code of your site:

Google Docs Viewer

Use this shortcode to link a pdf/word/excel... file to google docs viewer to help your users watch them online.

Related Posts

Use this shortcode only in your posts, it only works on the single posts pages.

Filckr Badge

While count is the number of images shown, display is date of images (latest, random) size is the size of the images (s)quare which is cropped, (t)humbnail and (m)edium are available source is source of the images and could be set to user,user_tag,user_set,group,group_tag,all and all_tag. user is the ID of the user whom you want to display images and tag is the flickr photo tag and it's optionail.

Video Embed

The follwing services are supported:

  • Youtube
  • Vimeo
  • Yahoo
  • BlipTV
  • Veoh
  • Viddler
  • DailyMotion

While the ID is the video ID taken from the video hosting site. Width is set to 100% to make the video responsive.

7.0 - Using Built-in Styles

In addintion to shortcodes, SelfTitled comes with a lot of buil-in styles to use in your visual editor.

Below is all the styles available in the style drop down:

You can see all these styles in use, on Typography → page of the demo theme.

Using styles is very easy and straight forward, all you need to do is to select the relevant elemant in your visual editor and from the styles drop down click the style you want assigned to that element.

The light box styles only work when Widgetkit plugin is installed and activated.

Here are some examples:

DropCaps: In order to creat a drop cap, on your visual editor, just click any where on the paragraph you wan to trun into a drop cap, and from the styles dropdown, selet dropdown.

Lightbox Style

Lightbox and Spotlight: in order to create a light box, you need a linked element, which could be a text link, linked to a large image or even a small thumbnail image linked to it's larger version. On your visual editor, click any where on your link, (select the thumbnail if it's a linked image) and from the styles drop down select Lightbox elastic (a light box with elastic effect) or light box fade (with fade effect) or you can choose the versions with spotlight effect (used on thumbnail images, gives it a dark hover effect with a magnify icon.)

8.0 - New in SelfTitled 3

Here I am going to intruduce to you ST3, what has been added and what has been changed.

Retina Ready Logo

Retina Logo

Logo Upload

To use make your logo retina ready to be used on iPhone, iPad and other apple devices that have a retina display, all you need to do is to two logos, one with the size you want to be displayed on all devices, and with with exactly twice the size of your regular logo, for example if your logo is 150px by 200px your retina logo should be 300px by 400px, name them the same as your logo but endling it with (@2x.png) [regular logo would be logo.png and the retina version should be logo@2x.png] upload them using theme options at same time (it's important to upload them at the same time), assign the regular size logo to your theme options and the theme will calculate the rest for you.

Capital Touch Slider (CTS)

Say good bye to WidgetKit, This theme features a brand new touch slider, easier to use, touch ready and alot more beautiful. Now I know this slider needs lots of improvemnts and it is still an infant, eager to grow and become a more flexible and feature full slider, and in near future as a stand alone plugin.

Lets walk through how to make a new slider and put that in your theme.

On you wordpress admin click on Touch Slider and press Add New Slider button.

Capital Touch Slider

Once you click on add new you can start builing a slide show using a drag and drop slider builder, you can add a background image or color, give this specific slider it's own configuration, save it and your done, You have automatically generated it's shortcode plus it is added to the CTS widget.

Add new slider

As you can see in this image, on the right you can add slides, drag them around and order them the way you want. On the right hand side, you can give your slider a background image/color and configure the slide show using the folloing options:

Slider Options

As you can see they are all descriptive and very easy to use.

As soon as you hit publish, a new slider shortoce will be added, which you can copy from the slider list and paste them where ever you need them.

To make it even easier to use, there is a widget availble on your theme's appearance -> widgets, just drag and drop it into the widget position you want, select the slider you want to be shown from the drop down select menu, hit save and you are all set and done:

Slider Widget

And that's all there is to it.

Capital Testimonials (CT)

Capital Testimonials

Creating the testimonial is as easy as publishing a new post, just add new, give it a title, fill in the content, and three custom fields, give a thubnail image or insert the Gravatar email address of the person you qouted from, hit save and there you go. You can add as many testimonials as you need.

Add new testimonial

Just keep in mind that the gravatar thumbnail overrides the default thumbnail, so you can only use one.

In order to display the testimonials, you can either use the the testimonial shortcode: [capital-testimonials limit="" type="static" orderby="none"] or use the built-in widget.

The options are:

  • Limit: using which you can limit the number of testimonials displayed (integer)
  • Orderby: using which you can change the order of the testimonials displayed, ID, title, date and random are available
  • Type: using which you can decide whether to have a static wich is a grid like testimonial type="static" , or a touch ready slider type="slider".

The other way of dispaying the testimonials is the widget (Capital Testimonials):

Capital Testimonials Widget

The static (grid) style would be shown as below:

Capital Testimonials Static

The Slider and also a single item style would be shown as below:

Capital Testimonials Static

All New ajaxified WooCommerce Dropdown cart widget:

The older widget is now depricated and removed in the new version of SelfTitled theme, now you have an all new ajax ready drop down cart, so go ahead and enable ajax option on your woocommerce settings.

Here is how the widget now looks like, working with it is as easy as any other widget. Just drag and drop it into the cart position and the plugin will do the rest.

Drop down cart

Brand new Capital Products Slider (CPS)

CPS is a simple widget, but does alot. Now you can choose which producst (recent, on sale, featured, most rated and also product categories), you can also give it a description text to be shown below the title (optional)

Capital Products Slider

Capital Latest News (posts carousel)

Another mostly demanded widget that is added to this theme is the whole new Capital Latest News (posts carousel). Just like all the other widgets, it works as it should, just drag and drop it where ever you want it, save it and you have the newst blog posts shown in a carousel fashion:

Capital Latest News (posts carousel)

Two new Widget Styles:

SelfTitled now has two more widget styles, Thin Round and Thick Round. As you might already know, you can go to SelfTitled -> Widget Options and customize the widgets you have used to build theme layout. Now you can select two more styles, which look like so:

Thin Round


Thich Round

A Full Width widget layout, plus an option to add a background to it:

After Adding a widget to one of your widget positions, head over to SelfTitled -> Theme Options -> Profiles -> Layout and from the drop down menu in front of the widget postion name, choose full, hit save and now you have a full width widget postion with a default grey background.

Full Width Widget Postion

In order to change the background of the full width postions, head over to Appearance -> Theme Options -> Colors and Backgrounds, Scroll down to find Full Width Module Background and select a background color or image, customize it and hit save.

Full Width Background

590 Icons for widget styles:

SelfTitled 3 features 590 high quality font icons, with an easy to use searchable drop down menu, wich you can use to add icons on different widgets.

Just head over to SelfTitled -> Widget Options, from the menu on the top select the position your widget is added in, and on the options given for each and every widget under Icon search for the icon you wish to use, select it and hit save.

Widget Icons

Import and Export theme options with ease

As option tree plugin upgraded, they added a new feature to iport and export theme options, so I have included this feature in the new version of SelfTitled. Now you can export the options you find under Appearance -> Theme Options and import them when ever you want. You can also use the theme-options.txt file to import the options used in the theme demo.

To use this feature, on your wordpress admin, please click on Option Tree. From there you can see 3 tabs, Import, Export and Layouts. Use the Import section to import Theme Options by coping the codes you find in theme-options.txt and paste theme in the field where it says Theme Options

Import Theme Options

Capital Shortcode 2.0

The Mightly CapitalH shortcode plugin is also upgraded to version 2 with lots of new shortcodes, just fill in the forms and use the brand new usefull shortcodes.

Capital Shortcodes 2.0

WooCommerce Catalog Mode

You can now set your woocommerce to a catalog mode, removing all the add to cart buttons and prices from your products. To do so, just head over to Appearance -> Theme Options -> Shop Settings and click on Enable Catalog Mode, save the options and now you have a nice looking catalog theme.

-- Thanks for reading. That's a wrap --