“Florentia” Documentation by “LaThemes” v1.0

---

“Florentia”

---

Table of Contents

1. Installation
2. Usage (Quick Start guide)
3. Special Features
• Google Fonts
• Widget Areas
• Shortcodes
4. PHP Code and HTML Structure
5. CSS Files and Structure
6. JavaScript
7. PSD Files
8. Sources and Credits

---

A) Installation - top

The following instructions presume that you have successfully installed and configured WordPress. If not, check WordPress Installation and have it done before proceeding with the next steps.

1. First, unzip the content of the downloaded zip package.
2. Upload the folder [option-tree] (found in the theme zip package) to the /plugins folder of your WordPress installation (/wp-content/plugins).
3. Upload the folder [florentia] to the /themes folder of your WordPress installation (/wp-content/themes).
4. Log to the administrator panel (http://yoursite.com/wp-admin) and open the "Plugins" section (left panel). The plugin "Option Tree" should be somewhere in the list. Activate it. Now you should be able to see that a new section, called "Option Tree", has been added to the left panel. Click on it to expand its menu options and then click Settings. The Option Tree panel loads with 3 tabs: Create, Import, and Export. Click Import.

5. Click the Upload button and navigate to the folder where you previously unzipped the theme package. Open the [import] folder and double-click the theme-options.xml file. Then choose the button "Import XML" (to the right of the input box). This step enables the theme options that woud help you customize your site further...

   

6. Now it's time to load some default values to the theme options so you have some base that would give you a better idea what you can achieve. Without leaving the panel page from the previous step, switch to the unzipped theme package again and open the file florentia-options.txt using any simple editor like Notepad. Do NOT use a rich text editor like MS Word or anything like that! Copy all the content of the file by pressing Ctrl+A (or Cmd+A for Mac), followed by Ctrl+C, and paste (Ctrl+V) it to the big textarea box just below the upload box we used in the previous step. Then click Import Data.
7. It's time to activate the Florentia theme so switch your attention to the WordPress admin panel and click the Appearance section. Then use the Themes option to activate Florentia.
8. That's it for now! You have succesfully installed Florentia and loaded it with some predefined settings. Don't worry if it looks pretty much empty at this point but if something REALLY doesn't look OK, check the previous steps - you may have missed some detail...

B) Usage - top

The following instructions will walk you through the steps needed to achieve the overall structure and layout of the demo site. The steps are optional and intended to give you a major idea what is possible to achieve with Florentia...

1. Log to the WordPress admin panel (http://yoursite.com/wp-admin) and click the Option Tree section ot expand its menu. Then click Theme Options.

   

2. To upload your own logo image, choose the General tab of the Theme Options and find the respective input field with an "Upload" button next to it. Click it, then click Select files and navigate to the image file on your hard drive and double-click it. Wait a couple of seconds untill WordPress uploads it, and click the button Insert into post. In the upper (and bottom) right corner of the Theme Options panel you can see a button Save All Changes. Well, click it :) . Whenever you change any theme option you should save it by using that certain button.
3. Repeat the same steps but for the favicon image (the option just below).
4. Fill in your E-mail.
5. Edit the next option by filling in your own Twitter username. It would display your last tweet in the Twitter feed.
6. It's time to set the website structure and add some content... Start by going to Posts -> Categories and creating a few categories. Just rename "Uncategorized" to "Blog" and create the following (example) new categories: Portfolio, Testimonials, Featured, News, and Services. Of course you can use whatever names you wish for your categories.

7. Now you can switch back to OptionTree -> Theme Options -> General (tab) and find the options Portfolio Category and Testimonials Category. Use the dropdown boxes to select the respective categories. For example, for "Portfolio Category" you'd most likely want to choose the category "Portfolio".

   

8. Without leaving the Theme Options, click the tab Homepage and select the category, whose posts would be displayed in the featured content slider as slides. For our example we'll use the category "Featured".
9. Scroll a bit down and select the category for the Main Features area - those 4 distinct posts below the intro text, that would contain the 4 most important features/services you want to offer to your visitors and potential clients. Let's say we pick the category "Services" from the dropdown list.
10. While still there, enable the optional Intro text and write/edit your "Welcome!" or any other important message. Use the preloaded example text+code to get a basic idea what is possible to achieve there.
11. If you wish to set a custom text in the footer (site info, copyrights and that kind of stuff), you can do that from the "Footer" tab. The option box description pretty much explains what you can achieve there through the available shortcodes. Also note that you have two p tags - one for each side (left and right).

12. Now we need to add some content. Start by creating a few posts under the "Featured" (they will be displayed as slides). Simply go to Posts -> Add New, fill in the title and content and don't forget the most important step - add a FEATURED IMAGE from the box in the righthand panel (it's usually just below the option to add Post Tags)! So click the link Set featured image, then Select Files. Find an appropriate image file, double-click it and wait till WordPress is done processing it. Scroll a bit down in the window and click the link Use as featured image. Optional: If you want to add the same image inside the post, use the moment to also click the button "Insert into Post". That would save you some time to reopen the same window. Then add some tags to the post if you want and click the blue button Publish.

    Note: Images with white backgrounds work best in Florentia's featured area, especially if you want to achieve the effect of the demo site.

13. Create a few more posts by repeating the same steps. But probably you wouldn't want to go too crazy about it - 4 or 5 slides are usually enough.
14. Using the same technique create 3 posts (with featured images!) under the category "Services". Those will serve as your main "selling" points and will be displayed prominently below the slider and optional intro text.
15. Create some posts (with appropriate content) for the remaining categories ("Portfolio", "News"). Skip "Testimonials" - it will be explained a bit further. Again - don't forget to set the featured images. They are heavily used in the Florentia theme and play an important role in the overall layout and design style. When you create Portfolio items, add your role(s) in the project as tags.

16. If you want to add a button "View Project" to a Portfolio post before publishing it, find the mini panel Custom Fields (you may need to enable them from "Screen Options" in the upper right corner) and write "project-url" in the left input box. Then add the link (the address that would be loaded if the visitor clicks the button) into the bigger box to the right. Now you can Publish the post. Note: Next time you want to add such button to a Portfolio post, you don't need to write "project-url" since you've already done it once. It will be available for easy selection from the dropdown menu in the Custom Fields panel.

    

    Note: The "project-url" field serves a different purpose when used in a Testimonial post - it would add a link to the author's (most likely some of your clients) site just below his/her name.

17. 

    You can also set a layout for the post using the dropdown field in the "Post Settings" panel box (just below the visual text editor). The default is "2c-l" which translates to "2 columns, where the content is in the left column.

    The other five options in the "Post Settings" panel give you the following possibilities

    • Title: Set custom title tag for the post according to your SEO strategy.
    • Description: Set custom meta description tag for the post (appears in the SERP, or Search Engine Results Pages).
    • Keywords: Add meta keywords for the post.
    • Thumbnail: Set a post thumbnail (the image set here has greater priority and will overwrite the featured image, if there is one). It's up to you if you'd prefer to use this option or the standard "Featured Image", offered by WordPress.
    • Stylesheet: Set a custom CSS file - for those cases when you'd like to create a post (or page) with unique layout and style.
18. To create a "Testimonial" post, start a new post and in the Title field write the name of the client! Then add his testimonial in the text editor box. The last and optional step includes adding the client's url in the custom field "project-url".

19. 

    Now create a new page (Pages -> Add New). Add a title "Contact" or "Contact Us" (or anything similar) but dont enter any text in the editor box for now. From the righthand panel select a Template for the page. Since it will be our Contact page, select "Contact Form" from the dropdown menu. Publish the page and use the link View page to have a look at it. You can leave it as it is or go back and add a couple of kind words, informing your visitors when they should expect an eventual response... Also you can skip adding featured images to pages.

20. Create another page with title "About" and write something about you or your company.

21. Create a new page called "Portfolio", choose the "Full Width" template and enter the following into the visual editor:

    [portfolio3 number="9"]

    

    Explanation: This is a shortcode. It basically means "Fill the page with posts from the portfolio category, arranged into 3 columns and the maximum number of posts (portfolio items) should be 9."

22. Now let's create a page (or post if you prefer) with some advanced column structure. So start a new page using Pages -> Add New and maybe select the "Full Width" template so we have more space for work. Write a title and add the fllowing to the visual text editor box:

    [column_1_2] Here add a paragraph of any text.... [/column_1_2]

    [column_1_2_last] Now add a second paragraph... [/column_1_2_last]

    

    Publish the page and view it in the front-end (use the button View Page). You should see the 2 paragraphs separated into 2 columns with equal width, set in a row. What we basically did with those shortcodes is: Put the content of the first paragraph into a column that takes 1/2 (one half) of the entire page width. The put the content of the second paragraph into a second column that will take the other half of the page width. And the second column is the last one (since there is no room left for another half!).

    So the code [column_1_2] means a column that takes 1 half (the first digit in the shortcode, prefixed with an underscore) of a space that is divided into 2 parts with equal width (the second digit in the shortcode, prefixed with an underscore).

    Also note that each column content should end with a closing shrotcode like [/column_1_2] - basically the same code, but starting with "/", just like standard HTML tag markup.

    And the last detail you need to remember about column shortcodes is that the rightmost (or last for the row) column should be wrapped in shortcode pairs, ending with "_last". Like [column_1_2_last] & [/column_1_2_last].

23. One of the easiest steps in this "Quick Start" guide is to add some widgets! Simply navigate to Apperance -> Widgets and have a look at the available widgets (including the custom Florentia widgets) and widget areas (sections where widgets can be displayed).

    

    First you might want to add a few widgets to the bottom part of the homepage. Have a look at the widget areas in the righthand panel and click Homepage to expand it. Then drag the widgets "Search" and "Florentia Testimonials" and drop them inside the expanded Homepage area. Use the widget options to add a title ('Testimonials" for example), or leave it it without a title - like I tend to do with the "Search" widget. Set the maximum number of testimonials that should be displayed. Click Save and you are done with this particular widget.

    Then you probably want to add some widgets to the footer area (below the optional Twitter feed). The widget area you need is called "Subsidiary". Here are some example widget that might fit the spot:

    Florentia Portfolio" - drag it to the "Subsidiary" widget area and drop it. Set a title and select the maximum number of portfolio items that you'd like displayed (probably that should be an even number). There is no need to select a category here - it will use the category you have previously set in the Theme Options as a "Portfolio Category".

    Repeat the same for "Florentia News". However don't forget to set a category where the posts should be pulled from.

    The last widget you might want to add is "Florentia Mini Contact Form". Not much to do here - just enter a title.

24. Don't forget to add widgets to the sidebar(s) as well. Depending on the Layout you've chosen in the Theme Settings, you can use the widget areas Primary and Secondary. Just take a few minutes to play with them and see what looks and functions best for your purposes...

    There are lots of exciting types of site layout you can achieve by simply using widgets. Read the Widget area notes (visible when the area is expanded) and see if it would be a smart idea to add a widget (or 2 or 3) to that area...

25. The final step in this "Quick Start" guide involves activating the new WordPress 3.0 custom menu functionality. The Florentia theme comes with a WP 3.0 customizable menu. Navigate to Appearance - Menus, write "Primary" as the name of your menu and click Save Menu. Now in the panel box to the left you should be able to select your primary menu location. Click Save.

    

    Now you can add whatever items you want to the menu and nest them as you wish...

C) Special Features - top

The purose of the following specification is to give you detailed explanation about some of the advanced features in Florentia and how to utilize them for your needs.

• Google Fonts.

  The Google Fonts Directory is a new, modern, and fast-evolving free service from Google. It provides a constantly increasing list of non-standard fonts, available for embedding in our web pages.

  The Florentia theme has an integrated list of standard fonts plus a small selection of Google fonts for easy embedding. You can find those options at OptionTree -> Theme Options -> Typography. Since Google add new fonts to the their directory in almost weekly basis, the theme also provides interface for fast and easy adding ANY Google font. Here is the instruction how to do that:

  1. First, Browse the fonts directory and pick 1, 2 or 3 fonts you'd like to use on your website. Florentia allows setting up to 3 different fonts - default one, alternate font (for adding typographic variety) and a font for titles. From a pure desing point of view it's not recommended using more than 2 typefaces. But of course, you can add more with some basic custom additions to the XHTML and CSS code.

  2. Once you've made your choice, you need to add them one by one. Let's say you picked Tinos for the default font. While on the page, click the blue button Use this font. Note that you have some checkboxes, giving you the opportunity to decide whether you want to include the Italic, Bold, and Bold Italic variants beside the Regular variant. Keep in mind that most modern browsers would successfully "emulate" all those additional variants if you provide ONLY the Regular version. And the fact that additional font variants slow down the loading speed (since there is more stuff to download) is another reason you may want to consider before making your choice.

     

  3. The next step is to copy the font name (or just type it), switch back to the Florentia theme options panel, and paste it into the box called [Name] Custom Google Font (default).

  4. Then return to the Tinos' page and copy the string from the light grey box just below the checkboxes we discussed previously. This is the string for Tinos: <code><link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'></code>

     ... And paste it into the next box [Link] Custom Google Font (default). Click "Save All Changes" (upper-right corner of the options panel) and you are done setting the default font!

  5. Use the same routine for the other options - Alternate font and Titles font.

• Widget Areas

  Florentia has 5 widget-ready areas, called Sidebars, that can be used creatively to customize your website:

  1. Primary

     Located immediately after the content area in the markup. Typically used as a sidebar. Use the widgets panel under Appearance to add your own widgets.

     

  2. Secondary

     Located immediately after the Primary widget area in the markup. Typically used as a sidebar.

  3. Subsidiary

     Located in the bottom (footer) area of the page. Empty of widgets by default, it will not apear in the theme until you add a widget. It can accommodate up to 4 widgets.

  4. After Singular

     Loaded on singular/single post (page, attachment, etc.) views just before the comments area. Empty of widgets by default, they will not apear in the theme until you add a widget.

  5. Homepage

     Displayed on the homepage only, this widget area is a replacement of the Primary area - useful when you prefer to make your index page unique and different from the rest of the site. Empty of widgets by default, they will not apear in the theme until you add a widget.

• Shortcodes

  Shortcodes can be compared to widgets, except that they can be added directly to posts using a predefined code. All you have to know is the code itself, its optional arguments and the expected result. All shortcodes should be used INSIDE the visual text editor (the same box you use to add text to pages and posts). Here are the available shortcodes that come with Florentia - with instructions how to use them to control your content.

  1. Pullquote

     

     The pullquote is the simplest and easiest shortcode - it's just a blockquote with the option to add author to the bottom right corner. Simply wrap the quoted text between: [pullquote author="Author Name"] and [/pullquote], replacing "Author Name" with your own (or the person you are quoting). You can see example here, in the middle of the post.

  2. Portfolio Layouts

     Let's say you want to fill a regular page with portfolio items (posts) in 3 columns like the example here. Simply start a new page, select "Full Width" as page template, add a title and write in the editor box:

     [portfolio3 number="9"]

     Nothing more. This code translates to the command Pull 9 (or less if we don't have enough) posts from the Portfolio category (chosen in the theme options as such) and arrange them into 3 columns.. The first number (3) in the shortcode indicates the number of columns, and the second number - the maximum number of posts we'd like to display.

     

     And here is the list of available Portfolio layout shortcodes:

     • [portfolio2] - 2 columns
     • [portfolio3] - 3 columns
     • [portfolio4] - 4 columns, only image thumbnails without title and excerpt

     Note that you can add number="" inside any of those codes to set the maximum number of posts to be displayed. Just like the first example.

Advanced portfolio shortcodes, allowing for posts to be pulled from any category:

• [portfolio2custom] - 2 columns
• [portfolio3custom] - 3 columns
• [portfolio4custom] - 4 columns

Note that in this new shortcode the hyphen is replaced with underscore!

Usage (example):

[portfolio3custom number="6" category="47"]

... Which translates to: "Display 6 portfolio items from the category whose ID is '47' and arrange them in 3 columns.".

How to find the ID of a category? - go to the WordPress admin panel and then Posts -> Categories. Click the category name from the list and when the new window loads, look at the address bar of your browser - the url ends with "ID=", followed by a number. That number is the category ID you are after.



---

Columns

Column shortcodes give you the power to easily split any type of content into the desired number of columns, ordered one next to the other. Have a look at this example page here.

To create a text block split in 2 columns, start a new page, add a title and write in the editor box:

[column_1_2]

... some content here...

[/column_1_2]

This would create the first column and the code basically means "Arrange the content between the opening and closing shortcodes so it takes one half (1/2) of the available horizontal space".

Now let's create the second column:

[column_1_2_last]

... some content here...

[/column_1_2_last]

Almost the same, except that this time we add "_last", which tells WordPress to not add any margin to the right of the second column, since it should end exactly at the right border of the available horizontal space.



And if we want to split the space in 2, but not equal parts, but the first column should take 2/5 (two fifths) and the second one - 3/5 (three fifths), we need to type the following shortcodes:

[column_2_5]

... some content here...

[/column_2_5]

[column_3_5_last]

... some more content for the second column here...

[/column_3_5_last]

Here is the full list of available column shortcodes in Florentia:

• [column_1_2]
• [column_1_2 last]
• [column_1_3]
• [column_1_3 last]
• [column_2_3]
• [column_2_3 last]
• [column_1_4]
• [column_1_4 last]
• [column_3_4]
• [column_3_4 last]
• [column_1_5]
• [column_1_5 last]
• [column_2_5]
• [column_2_5 last]
• [column_3_5]
• [column_3_5 last]
• [column_4_5]
• [column_4_5 last]
• [column_1_6]
• [column_1_6 last]
• [column_5_6]
• [column_5_6 last]

---

D) PHP and HTML Structure - top

Florentia uses Hybrid Core - a WordPress theme development framework by Justin Tadlock. All Hybrid Core files and folders are in /wp-content/themes/florentia/library. Most of the theme functionality and modifications to the Hybrid code are located in the functions.php file, in the theme folder (/wp-content/themes/florentia/functions.php).

Each custom widget is separated in its own php file inside the folder widgets (/wp-content/themes/florentia/widgets/). The shortcodes are defined in shortcode.php (/wp-content/themes/florentia/includes/shortcode.php).

The theme uses HTML 5 document type and adheres to the modern web standards for markup.

---

E) CSS Files and Structure - top

Nearly all the of Florentia's CSS code is located in a single file - style.css (/wp-content/themes/Florentia/style.css) - one of the "tricks" used to improve its loading speed. There are 2 additional .css files - /js/AnythingSlider/css/anythingslider-florentia.css and /js/prettyPhoto/css/prettyPhoto.css, used for styling 2 jQuery plugins - respectively AnythingSlider and the prettyPhoto "lightbox plugin.

If you would like to edit a specific section of the site, that is not covered in the theme options panel, it's best to you use Firebug - a popular addon for the Firefox browser.

With Firebug's help you can easily define the exact row in the .CSS files which is resposible for the element you'd like to edit.

Then all you need to do is copy that CSS declaration and paste it into the box found in Theme Options -> Custom CSS. There you can edit it safely and save the changes.

For example if you find that the Intro text on the homepage should use even larger font size, you can open the homepage in Firefox (with installed Firebug), right-click on the intro text and select the option Inspect Element". It will open the Firebug window and in the smallerpanel to the right you'd be able to see all CSS code that affects the styling of the intro text section. Scroll a bit down and you wil see the snippet where the font size is defined:

So bring that snippet to the Custom CSS box and increase font-size: 218%; to let's say font-size: 264%; and click the button "Save All Changes" in the upper right corner of the options panel. Use the same easy technique for any kind of advanced CSS modifications.

---

F) JavaScript - top

Florentia imports three Javascript files.

1. Modernizr
2. jQuery
3. plugins.js

Modernizr is a JavaScript library that allows you to use CSS3 and HTML5 features while maintaining a fine level of control over browsers that don't support them yet.

jQuery is a Javascript library that greatly reduces the amount of code that you must write.

plugins.js is a container file that contains all jQuery plugins and other JavaScript snippets used throughout the theme.

---

G) PSD Files - top

Florentia comes with a single PSD file (florentia.psd), containing all icons and other images - ready to be exported. The file is fully layered and editable. If you'd like to change something, make the necessary adjustments, and then export the element as a transparent PNG (or another format if you are doing something too different...).

---

H) Sources and Credits - top

I've used the following images, icons and scripts as listed.

• Twitter bird icon from WebTreats
• Intro text decoration from Nymphette dingbat font
• Logo font - Goudy Trajan Regular
• Logo decoration from Kalocsai Flowers
• The Hybrid Core WordPress framework.
• Modernizr - JavaScript library.
• Easing - a jQuery animation plugin.
• SWFObject - a jQuery animation plugin.
• AnythingSlider - a jQuery plugin (slider).
• Fancy Letter - jQuery plugin for styling the first letter of a paragraph (so called drop caps).
• Validation - a jQuery validation plugin.
• prettyPhoto - a jQuery lightbox clone.

---

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

Galin Simeonov

Go To Table of Contents

---