SelfTitled • Documentation


THANK YOU FOR BUYING SELFTITLED

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 theme support page on themeforest. You can also watch the video training dedicated by a loyal client Marco Lacaria

Video Tutorials Theme Support


1.1 - About SelfTitled

Developed by: CapitalH.ir

Online Demonstration: view demo

Current Version: 2.1.0

Last Update: May 08, 2013

Documentation Version: 2.0.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.
  • demo-theme-images.zip All the images used on the demo theme, plus their licenses.
  • menu-icons.zip icons used for the main navigation
  • psd-files.zip contains the PSD files for Module icons, module badges and socual icons
  • widgtekit-slideshow-styles.zip slideshow styles designed for Widgetkit plugin. (in case you need them separately)
  • dummy-content.xml to import into your theme if you want.

SelfTitled-2.1-theme-for-woocommerce-2.zip the ready to install and the latest version of SelfTitled theme

self-titled-1.2.1-for-woocommerce1.6.6.zip the older version of SelfTitled, in case you insist on using woocommerce 1.6.6 (not recomended)

License.zip The theme license files.

documentation.zip the exact offline version of this documentation


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:

WordPress:

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.

WooCommerce:

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 self-titled-2-theme.zip 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 self-titled-2-theme.zip 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.

static-frontpage

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



2.2 - Create your first slideshow

main slider

About widgetkit

Widgetkit is a powerful plugin developed by Yootheme both for WordPress and Joomla CMS. It has a premium version that has lots of other featurs that you can take advantage of in all your themes. What I have used in SelfTitled (which is also powered with by Warp, a framework developed also by YooTheme) is Lite (free) version of WidgetKit. But I have designed and added 6 more custom made slider styles for Widgetkit which comes pre-installed on widgetkit in SelfTitled 2.1

On older version of SelfTitled (version 1.0 and 2.0) you had to add these styles manually, all you needed to do was to go to assets folder, unzip the file named widgetkit-slider-styles.zip and copy and paste the style into wp-content/plugins/widgetkit/widgets/slideshow/styles. But now it is embeded with the widgetkit, bundeled with the theme and can be installed upon theme activation.

The Lite version of Widegtkit has 5 parts.

  1. Lightbox
  2. Media Player
  3. Slideshow
  4. Spotlight
  5. Twitter Widget

Take a look at the official Widgetkit demo page → to see them all in action. Some of the features you see on widgetkit demo site are only included in the premium version of widgetkit.

We wil talk about the rest of these features (Lite Version) Later on this documentation.

Dig into Widgetkit Slideshow

widgetkit-slideshow

The Full Width Slideshow:

On your WordPress admin and on the left menu bar, click Widgetkit. Click on Create your first slideshow button.

Before giving it a name, let me remind you that we want to creat a full width slideshow, So on the setting panel on the right, click on the styles dropdown menu and choose capital_fullwidth_slider. wait for the page refresh so that you can see the new set of options (Slide Heading, Slide Text and so on) on the left.

Now under add a slideshow, Enter The name for that slideshow. I am going to name it Full Width Slideshow.

Now, give your first slide a Title: i'm gonna name it Slide-1.

For the content part, just click on Add Media button above the visual text editor, and from the media list, select the image you want to use for the fullwidth slideshow. Since this is going to occupy the whole width of the frontpage, so we are going to need a some what very wide image for that. The images used on the demo theme have the following dimentions:

  • Width: 1500px (very important - should not be less than that)
  • Height: 430px (could be more or less, but all the images used in this slideshow should habe the same heights)
  • Resolution: 72dpi is the most ideal for web.

On the Insert Media popup, either upload the image, or if you already have it in your media library, just find it, click on it once, On the right hand change the title for referencing or leave as is. Leave the rest untouched. Scroll down a bit and under ATTACHMENT DISPLAY SETTINGS set the alignment to none, set the link to none, unles you want the image to be clickable and linked. And most importantly set the Size to Fill Size - 1500x430

After choosing capital_fullwidth_slider 4 more fields appeared underneath the visual editor. The following:

  • Slide Heading: this is the big bold healine text on each slide.
  • Slide Text: this is the paragraph that comes underneath the headline.
  • Button Text: The text of the buttons (leave blank if you don't want a button)
  • Button Link: the url of the button on this slide (leave blank if you don't want a button)

Fill in these fields with some text and relevant to this slide.

Click on Add New Item button to creat another slide. Do the same and creat as many slides as you want.

Once you are satisfied with the number of the slides, it's time to take a look at the options you got on the right hand side. From this Settings panel on the right you can customize your slide show. Set the slide intervals, slide speeds, choose whether or not to show the navigation, next prev buttons, turn the autoplay on and off, and also choose between the 16 available effects. (The effect used on the theme demo is scale)

You can choose all the options to your liking. Just keep in mind that in order to have a Responsive slideshow you need to set the Width and Height to auto, just type auto for both width and height.

On the right panels, underneath settings, you have another panel too. Order, using which you can drag and drop the slides to change their order.

Just save the slides and you are good to go.


Testimonial and Advertising slideshows

Lets have more fun. Go back to widgetkit → slideshow and click on Add New button to creat another slideshow. This time we are going to creat a text slider for our testimonials. On the settings panel, from styles dropdown choose capital_testimonials_slider wait for it to refresh the page and extera options to appear.

Give the slideshow a name, I am gonna name it Testimonials. Now give your first slide a title, for example name it slide-1 and on the visual editor just type the testimonial main text. a paragraph or more.

  • Cite: the quote's cite.
  • Author Link: and optionil link for the cite
  • extera info: and extera line underneath the cite.

Press on add new item button and add as many slides as you want. From the right panel customize the slideshow and save it.

Go back to widgetkit → slideshow add another slideshow, name it Ads alideshow, on the setting panel, from the styles dropdown choose capital_ad_slider. For the ads slider you dont have many options. Give each slide a title, on the visual editor add an image, just like you did for the fullwidth slideshow, (the ideal size for this slideshow is 330×188)

You can give and optionial caption too. Add as many slides as you want and hit save.

Slideshow shortoces

Just for the record, go back to widgetkit → slideshow and take a look at the slides you just created. Infront of each slideshow, you can see the relavant shortcode for each slideshow. This is how I have added a slideshow to one of my blog posts on the demo theme, and yes I have created a style for that one too. We will get back to it in a while.


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="http://capitalh.ir/">CapitalH.ir</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.

Slideshow:

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

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

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="http://yourmapsourclink.com"]

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="youremail@domain.com"]

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


Tabs


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 - Upgrading Notes

If you have downloaded and installed SelfTitled before version 2.1 please read the following note.

Basically, I have not done anything in particular in the core files of this theme. Except that I have some new function to the functions.php

Line 19 - 21 I have added TGM plugin activation class, this dose not affect those who have the previuos version of SelfTitled installed on their hosts. It only adds a notice upon theme activatation guiding you on what plugins are required and recommended to be used with this theme.

Line 307 - 311 this part is very important, esp for those who have use Theme Options extensively on their theme. Besides the fact that theme options is replaced (it's now in it's default position on the admin menu, as a submenu under Appearance), Now the theme imports the default styles upon theme activation.

So, if have the previous verion of SelfTitled and you have used Theme Options alot, you need to remove these line before upgrading to version 2.1 and when it's being activated for the first time.

In order to avoid options being reset to default, just head over to SelfTitled root folder, open up finctions.php and scroll down to line 307 and remove it all the way down to 311

Now you are safe to upgrade to SelfTitled 2.1

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