RED:FOLIO

a Premium One Page / Multi Page WordPress Theme

by red_sun (Gerda Gimpl)

Hi there...
thank you for purchasing RED:FOLIO,
a premium One Page / Multi Page WordPress Theme

In this document you will find detailed information on how to use this theme.

If you have any questions

If you don't find the answers to your questions in this help file, please send me a message via the item support tab. This theme includes 6 months support from purchase date, with options to extend.

I will do my best to assist with questions directly related to the theme set up however before you contact me, please consider finding an answer to your question in:

  • The relevant section of the documentation
  • the FAQ
  • WordPress Codex for general WordPress questions
  • Google for general questions

If you like RED:FOLIO and want to support my work please rate it on Themeforest!

Thank you!

Getting Started

1. Installing the theme

Please make sure that you are using the latest version of Wordpress before you install RED:FOLIO.

There are 2 ways to upload the theme:

Method 1: wordpress upload function

  1. Login to your WordPress admin
  2. Click Appearance >Themes
  3. Click Add New
  4. Click Upload Theme, browse your files and find redfolio.zip.
    (Make sure you are not uploading the whole zip file that you've downloaded from Themeforest (including demo content, license, psd files, readme ...)
  5. Click Install Now
  6. Once RED:FOLIO is uploaded, click Activate

Method 2: FTP upload

  1. Unpack the Theme's zip file you have downloaded
  2. Upload the /redfolio folder to the /wp-content/themes directory in your WordPress installation on your server
  3. Login to your WordPress admin
  4. Click Appearance >Themes
  5. Look for the RED:FOLIO theme and click Activate

2. Required plugins

Once you install RED:FOLIO, you will get a notification message in your WordPress admin telling you of the required and recommended plugins with an option to install them.

Alternatively you can go to Appearance > Install Plugins to see a list of the required plugins and to install them.


Once the plugins are installed, you need to activate them.


Required plugins

The following plugins are required to set up RED:FOLIO:
  1. Meta Box - This plugin is required in order to display/use the custom fields for pages and custom post types.
  2. RedFolio Meta Boxes - This plugin is required in order to display/use the custom fields for pages and custom post types as well.
  3. RedFolio Custom Post Types - This plugin is required in order to display/use the 2 custom post types (Portfolio and Team). Once the plugin is installed you will see the custom post types in your WordPress admin. Once you've activated this plugin, save your permalinks by going to Settings > Permalinks and click Save Changes.

Recommended Plugins:

The following plugins are optional and you only need to install them if you want to use their features:
  1. Simple Page Ordering - This plugin is recommended to sort the frontpage sections and portfolio items via drag and drop and display them in a certain order.
  2. Contact Form 7 - This plugin is recommended in order to display a contact form.
  3. RedFolio Shortcodes - Activate this plugin if you wish to use the RedFolio shortcodes on your site.
  4. RedFolio Share Buttons - Activate this plugin if you wish to display share buttons for each post and portfolio item. Select which share buttons do display in Appearance > Customize > Connect > Share.
  5. Custom Twitter Feeds - This plugin is recommended in order to display a twitter feed on the front page.
  6. WooCommerce - This plugin is recommended in order to include a shop page.

In order to install Layer Slider, go to Plugins > Add New, click Upload, find the layersliderwp-(versionNr).installable.zip file which is included in the RED:FOLIO download files (make sure you've downloaded 'All files & documentation' from Themeforest) and click Install now. Once the plugin is uploaded click Activate Plugin.

NOTE: If you get the Install Error: Are You Sure You Want To Do This? error message when installing the layerslider zip file via WordPress, it means you have an upload file size limit. Install the plugin via FTP if this happens, or get in touch with your hosting company and ask them to increase the limit.

Import theme demo data and settings (optional)

If you want a quick start you can import the content from the red:folio demo site (images are replaced with dummy images).

It is very important that you install and activate all required and recommended plugins before you install the demo content. You can do that in Appearance > Install Plugins..

How to install the demo content

  • Click Tools > Import
  • Click on WordPress
  • Install the Importer by clicking Install Now and then Activate Plugin & Run Importer
  • Upload the xml file called "redfolio-demo-content-(date).xml", that you can find in the folder "demo content".
  • Now assign your posts to an existing user, check the "Download and import file attachments" checkbox and click "Submit".

Recommended next steps

  • Go to Settings > Reading and select Front page displays a "static page".
    Front page: "Home".
    Posts page: "Blog".
  • DISPLAY MENU: Go to Appearance > Menus, select "my menu", scroll down and under Menu Settings > Theme locations, check RED:FOLIO Main Menu and click Save Menu.
  • PORTFOLIO SECTION: In order for the portfolio section to display the portfolio categories, you will need to select the portfolio categories:
    Go to Pages > All Pages, look for the portfolio section and click "Edit", scroll all the way down and select the portfolio categories that you want to display in this section and click Update.
  • SOCIAL SECTION: In order to display social icons in the social section, go to Theme Options > Social and enter the URL's to your social profiles.
  • CONTACT FORM: If you've installed the "Contact Form 7" plugin before installing the demo content, you should find a contact form called "redfolio-form" in Contact > Contact Forms. Copy the shortcode add add it into Theme Options > Contact > Enter Contact Form 7 Shortcode .
  • SECTION BUTTONS: You will need to enter the correct URL for the section buttons. Go To Pages > All Pages, and edit "home section", "portfolio section" and "blog section". Scroll down to SECTION BUTTONS and replace Button 1 URL with the correct URL (change "myurl" to your site's URL).
  • CLIENT SECTION: In order to display client logos in the client section, go to Theme Options > Clients , click upload and select logos from the media library or upload your own.

Header / Footer

  1. Go to Appearance > Customize > Site Identity .
  2. Click Select logo and upload your logo.
    (It is recommended to upload your logo twice the width and height that you actually want to display it so it looks sharp on Retina screens. For example if you wish to display a logo with a height of 48px, upload a logo with a height of 96px.)
  3. Below, enter your logo's height.
    (For example if you uploaded a logo with a height of 96px, enter 48.)

The Menu


In order to create a new menu,
  1. Click Appearance > Menus.
  2. Enter a name for your menu and click Create Menu.

  3. In Menu Settings select Display location "RED:FOLIO Main Menu" and click Save Menu.

  4. Select menu items from the left column and click Add to Menu.
  5. Click on the drop down arrow of a menu item to change the navigation label or if you want to open the menu item in a new tab.
  6. Click "Sceen Options" in the top right corner for more options.


More detailed instructions on how to work with the WordPress menu can be found in the WordPress Codex

The Social Icons Area

  1. In order for the social icons to appear in the footer, go to Appearance > Theme Options > Footer and check the Display social icons in footer checkbox.
  2. Enter the info for you social accounts in Appearance > Theme Options > Social.
  3. Click Save Options.

The Copyright Area

You can enter your own copyright text in Appearance > Theme Options > Footer > Copyright Text

Pages

Setting up the Front Page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Front Page" template.
  3. Give this page a title, eg. "Front Page", you don't have to include any content. (The title and content will not appear anywhere on the site)
  4. Click Publish.
  5. Click Settings > Reading and select Front page displays a static page. Select the page you just created as your Front page and click Save Changes
  6. Now you can add sections to this page:

How to create a section on the Front Page

  1. For each section that you want to display on the front page, create a new page:
    Click Pages > Add New.
  2. You can give this section a title, eg. "home section" or "portfolio section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. Scroll down below the editor, and in the GENERAL box, check the Front Page section checkbox and select a layout
    frontpage sections
  4. Now you can optionally select a background color, add a background image with parallax effect (by uploading a Featured Image on the right hand side), enter title and subtitle and create section buttons.

How to add a section to the menu

  • Go to Appearance > Menus , select a page from the left column and click "Add to Menu". If you want, you can rename the menu item by clicking on the drop down arrow of the new menu item and changing the navigation label.

How to change the order of sections

  • Changing the order how sections appear on the front page requires the Simple Page Ordering plugin.
    You can install this plugin in Plugins > Add New. Once the plugin is installed, you can simply drag and drop sections into order.

Home Image section - (fullscreen image and fade-in text)

  1. Click Pages > Add New.
  2. You can give this section a title, eg. "home section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. Scroll down below the editor, and in the GENERAL box, check the Front Page section checkbox and select Home Fullscreen Image
  4. In order to display a background image with parallax effect for this section, upload a Featured Image on the right hand side.
  5. Under Title and Subtitle > Title text enter a title. It will fade in first.
  6. Under Title and Subtitle > Subtitle text enter a subtitle. It will fade in second, along with any text that you put into the editor of this page.
  7. Under Section Buttons enter button text, URL and Color. It will fade in third. If you want to link a button to one of the sections on the front page Enter the full URL of your website, followed by /#section-80. Replace 80 with the ID of the section you would like to link to. This is how you find the section ID: Go to Pages > All Pages and hover over the page title of the section you want to link to
  8. Click Publish

Home Slider section

STEP 1: CREATE SLIDES

  1. First you need to install the Layerslider plugin. Click on Recommended plugins in the menu above to find out how to install Layerslider.
  2. Once the plugin is installed and activated, go to LayerSlider WP > All Sliders and either import sample sliders or start creating your own. Find a demo for the sample sliders here. A documentation for Layerslider is included in the download files as well (layerslider/start_here.html)
  3. In order to display your slider fullwidth, select your slider and in Slider Settings set Slider width and Slider height to 100% and remove the "Max-width" value.

STEP 2: CREATE HOME SLIDER SECTION

  1. Click Pages > Add New.
  2. You can give this section a title, eg. "home slider section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. Scroll down below the editor, and in the GENERAL box, check the Front Page section checkbox and select Home Slider.
  4. Add the Layerslider shortcode into the editor.
  5. Click Publish

Video section

  1. Click Pages > Add New.
  2. You can give this section a title, eg. "video section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. Scroll down below the editor, and in the GENERAL box, check the Front Page section checkbox and select Video
  4. Enter the embed code for your video into the text editor.
    If you are using Gutenberg, add the YouTube URL into the YouTube block.
  5. Click Publish

Blog section

  • Click Pages > Add New.
  • You can give this section a title, eg. "blog section". (The title will not appear anywhere on the site). You don't have to select a page template.
  • In the GENERAL box, check the Frontpage section checkbox and select the layout Blog .
  • Under SECTION TITLE AND SUBTITLE optionally enter title (eg. "BLOG") and subtitle for this section
  • In order to create a section button that links to the blog page, enter the blog pages's full URL into the Button URL field in the SECTION BUTTONS box. The blog page is the one you selected in Settings > Reading > Front Page displays A static page > Posts page.
  • Click Publish
  • Add blog posts via Posts > Add New
  • You can set the number of blog posts to appear in this section in Theme Options > General > Theme Customization
  • How to add a READ MORE button to a blog post:
    In order to display a "read more" button, you can use the "more tag". You can find the "more tag" button in the first row of the visual editor.
    If you are using Gutenberg, use the "More" block.
    If you don't want to split the content, simply put it at the end of the post.

Portfolio section

STEP 1: CREATE PORTFOLIO CATEGORIES

  1. Click Portfolio > Portfolio Category.
  2. menu categories
  3. Create new portfolio categories (for example: web, print, video,…) by filling in the name and slug and clicking Add New Portfolio Category.

STEP 2: CREATING PORTFOLIO ITEMS

  1. Click Portfolio > Add Portfolio Item
  2. Enter Title (will appear above portfolio item on hover), upload a Featured Image and fill in the Portfolio item settings and select a Portfolio Category.
  3. If you would like to display a video, simply enter the YouTube URL into the YouTube video field.
  4. Click Publish.

STEP 3: CREATE PORTFOLIO SECTION

  1. Click Pages > Add New.
  2. You can give this section a title, eg. "portfolio section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. In the GENERAL box, check the Frontpage section checkbox and select the layout Portfolio .
  4. Under SECTION TITLE AND SUBTITLE optionally enter title (eg. "PORTFOLIO") and subtitle for this section
  5. In order to create a section button that links to the portfolio page, enter the portfolio pages's full URL into the Button URL field in the SECTION BUTTONS box. If you haven't already created a porfolio page, add a new page and select the "portfolio" template.
  6. In the box PORTFOLIO settings, select the Portfolio categories you would like to display in this section.
  7. Click Publish
  8. In Theme Options > Portfolio you have the option to select the portfolio item gutter width, overlay color and opacity

SORT PORTFOLIO ITEMS

In order to sort the portfolio items, install the Simple Page Ordering plugin.
You can do that in Appearance > Install Plugins.

Once the plugin is installed, you can simply drag and drop the portfolio items into a certain order. In order to display all portfolio items on 1 page, which helps to reorder them, in the top right corner click "Screen Options" and enter a number at least as high as the total number of items you've created.

STEP 1: CONNECT TO TWITTER

  1. The Twitter section requires the Custom Twitter Feeds plugin. You can install this plugin in Appearance > Install Plugins. Once the plugin is installed and activated, in the Admin Dashboard go to Twitter Feeds and follow the plugin's setup guide.
  2. Customize and style your twitter feed. The theme demo uses the following settings:
    • 2. Customize
      General: Width of Feed: 70%
      Show: Author name, Tweet text, Date
    • 3. Style
      Date > Date Text Size: 16px
      Author > Author Text Size: 16px
      Twett Text > Tweet Text Size: 36px

STEP 2: CREATE TWITTER SECTION

  1. Click Pages > Add New.
  2. You can give this section a title, eg. "twitter section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. In the GENERAL box, check the Frontpage section checkbox and select the layout Default .
  4. Select a background color or upload a Featured image in order to display it as a background image with parallax effect for this section.
  5. Into the editor, add: [custom-twitter-feeds]
  6. Click Publish.
  1. Click Pages > Add New.
  2. You can give this section a title, eg. "social section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. In the GENERAL box, check the Frontpage section checkbox and select the layout Social .
  4. Select a background color or upload a Featured image on the right hand side in order to display it as a background image with parallax effect for this section.
  5. Click Publish.
  6. Go to Theme Options > Social > Social Section and choose a color for the icons and enter the full URL to your social profiles.

Client section

  1. Click Pages > Add New.
  2. You can give this section a title, eg. "client section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. In the GENERAL box, check the Frontpage section checkbox and select the layout Clients.
  4. Under SECTION TITLE AND SUBTITLE optionally enter title (eg. "BRANDS AND CLIENTS") and subtitle for this section
  5. Click Publish.
  6. Go to Theme Options > Clients and upload your client's logos.

Team section

STEP 1: CREATE TEAM SECTION

  • Click Pages > Add New.
  • You can give this section a title, eg. "team section". (The title will not appear anywhere on the site). You don't have to select a page template.
  • In the GENERAL box, check the Frontpage section checkbox and select the layout Team
  • Under SECTION TITLE AND SUBTITLE optionally enter title (eg. "TEAM") and subtitle for this section
  • Click Publish

STEP 2: CREATING TEAM MEMBERS

  1. Click Team > Add Team Member
  2. Upload a Featured Image and fill in the Team member info.
  3. Click Publish.

Shop section

This section requires the Woocommerce plugin. You can install this plugin in Appearance > Install Plugins.
  1. Click Pages > Add New.
  2. You can give this section a title, eg. "shop section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. Into the text (not visual!) editor enter the following shortcode:
    [recent_products per_page="4" columns="4"]
    
  4. In the GENERAL box, check the Frontpage section checkbox and select the layout default
  5. Under SECTION TITLE AND SUBTITLE optionally enter title (eg. "SHOP") and subtitle for this section
  6. In order to create a section button that links to the Shop page, enter the Shop pages's full URL into the Button URL field in the SECTION BUTTONS box.
  7. Click Publish
Instructions on how to set up the Shop page you can find in 6. Multi Page > Setting up the SHOP page.

Contact section

  1. Click Pages > Add New.
  2. You can give this section a title, eg. "contact section". (The title will not appear anywhere on the site). You don't have to select a page template.
  3. If you enter text into the editor, it will display in the right column box.
  4. In the GENERAL box, check the Frontpage section checkbox and select the layout Contact
  5. (INFO: the demo version uses color #ffffff as background color for this section)
  6. Click Publish.
  7. Under SECTION TITLE AND SUBTITLE optionally enter title (eg. "CONTACT") and subtitle for this section

Adding a contact form to the contact section

  1. This requires the contact form 7 plugin and optionally the Really Simple Captcha plugin. You can install these plugins in Appearance > Install Plugins
  2. Once the plugin(s) is (are) installed and activated, go to Contact > Add New click the "Add New" button and set up your contact form:
    Enter a title and create form fields.
    Example from the theme demo:
    [text* your-name watermark "Name*"]
    
    [text* your-email watermark "Email*"]
    
    [textarea your-message]
    
    [captchac captcha-300 bg:#ffffff size:l] [captchar captcha-300]
    
    [submit "Send"]
    
    Here you can find more info on how to work with Contact Form 7: Contact Form 7 Docs.
  3. Click Save and copy the shortcode. Now go to Theme Options > Contact and enter the shortcode in the field "Enter Contact Form 7 Shortcode" and click "Save Options".

Multi Page

Page Templates

The theme comes with the following custom page templates:

  • Default Template - The default page (includes right sidebar)
  • Fullwidth- A page without right sidebar
  • Blog Masonry - Blog page with masonry layout
  • Blog Masonry with sidebar- Blog page with masonry layout and right sidebar
  • Blog 1 column with sidebar - Regular 1 column blog page and right sidebar
  • Portfolio - A page that displays all portfolio items
  • Team - A page that displays all Team members
  • Contact - A page that is ready to display a contact form and google maps
  • Front Page - A page that displays all Front Page sections

How to use a template:

  • Click Pages > Add New.
  • Look for Page Attributes on the right side and click on the "Template" drop-down menu.
  • Choose a page template.
  • Click the Publish button above.
  • Now you can add your new page to your Menu.

Setting up the Front Page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Front Page" template.
  3. Give this page a title, eg. "Home", you don't have to include any content. (The title and content will not appear anywhere on the site)
  4. Click Publish.
  5. Now you can add the new page to your Menu.
  6. Click Settings > Reading and select Front page displays a static page. Select the page you just created as your Front page and click Save Changes
  7. Now you can add front page sections to this page (click on One Page in the menu above, to find out how.).

Setting up the Blog Page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Default Template".
  3. You can give this page a title, eg. "News". You don't have to include any content.
  4. Click Publish.
  5. Now you can add the new page to your menu .
  6. Click Settings > Reading and select Front page displays a static page. Select the page you just created as your Posts page and click Save Changes.
  7. Select the blog layout in Theme Options > General.
  8. Add blog posts via Posts > Add New
  9. You can set the number of blog posts to appear in this section in Settings > Reading
  10. How to add a READ MORE button to a blog post:
    In order to display a "read more" button, you can use the "more tag". You can find the "more tag" button in the first row of the visual editor.
    If you don't want to split the content, simply put it at the end of the post.

Setting up the Portfolio Page

STEP 1: CREATE PORTFOLIO CATEGORIES

  1. Click Portfolio > Portfolio Category.
  2. menu categories
  3. Create new menu categories (for example: web, print, video,…) by filling in the name and slug and clicking Add new Portfolio Category.

STEP 2: CREATING PORTFOLIO ITEMS

  1. Click Portfolio > Add Portfolio Item
  2. Enter Title (will appear above portfolio item on hover), upload a Featured Image and fill in the Portfolio item settings and select a Portfolio Category.
  3. If you would like to display a video, simply enter the YouTube URL into the YouTube video field.
  4. Click Publish.

STEP 3: CREATE PORTFOLIO PAGE

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Portfolio" template.
  3. You can give this page a title, eg. "Portfolio". You don't have to include any content.
  4. In the box PORTFOLIO settings, select the Portfolio categories you would like to display on this page.
  5. Click Publish.
  6. Now you can add the new page to your menu.
  7. In Theme Options > Portfolio you have the option to select the portfolio item gutter width, overlay color and opacity

SORT PORTFOLIO ITEMS

In order to sort the portfolio items, install the Simple Page Ordering plugin.
You can do that in Appearance > Install Plugins.

Once the plugin is installed, you can simply drag and drop the portfolio items into a certain order. In order to display all portfolio items on 1 page, which helps to reorder them, in the top right corner click "Screen Options" and enter a number at least as high as the total number of items you've created.

Setting up the Team Page

STEP 1: CREATE TEAM PAGE

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Team" template.
  3. You can give this page a title, eg. "Team". You don't have to include any content.
  4. Click Publish.
  5. Now you can add the new page to your menu.

STEP 2: CREATING TEAM MEMBERS

  1. Click Team > Add Team Member
  2. Upload a Featured Image and fill in the Team member info.
  3. Click Publish.

Setting up the Shop (WooCommerce) Page

  1. The shop pages require the Woocommerce plugin.
    You can install this plugin in Appearance > Install Plugins.
  2. Immediately after activating the plugin, you are taken to the setup wizard.
    You can use the wizard, or skip it and manually set up everything.
  3. Now create your products
  4. You can display a sidebar on the shop pages by going to Appearance > Widgets and adding widgets to the "Woocommerce" sidebar.
  5. If you would like to add a shopping cart icon to the menu in the top bar, install the Woocommerce Menu Bar Cart plugin.
  6. Detailed information and videos on how to work with WooCommerce can be found here:
    Dokumentation
    WooCommerce Guided Tour Videos

Setting up the Contact Page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Contact" template.
  3. You can give this page a title, eg. "Contact".
  4. If you enter text into the editor, it will display in the right column box.
  5. Click Publish.

Adding a contact form to the contact page

  1. This requires the contact form 7 plugin . You can install the plugin in Appearance > Install Plugins
  2. Once the plugin is installed and activated, go to Contact > Add New click the "Add New" button and set up your contact form:
    Enter a title and create form fields.
    Example from the theme demo:
    [text* your-name watermark "Name*"]
    
    [text* your-email watermark "Email*"]
    
    [textarea your-message]
    
    [submit "Send"]
    
    Here you can find more info on how to work with Contact Form 7: Contact Form 7 Docs.
  3. Click Save and copy the shortcode. Now go to Theme Options > Contact and enter the shortcode in the field "Enter Contact Form 7 Shortcode" and click "Save Options".

Theme Features

The Customizer

The Customizer can be found under Appearance > Customize.
All changes that you make in the Customizer may be previewed before saving them.

The following options can be found in the Customizer:

  • Logo
  • Site Icon
  • Share Buttons (requires the RedFolio Share Buttons plugin)

The Theme Options Panel

The Theme Options can be found under Appearance > Theme Options.

The following options can be found in the Theme Options Panel:

  • General
  • Header
  • Layout
  • Typography
  • Color
  • Social
  • Clients
  • Contact
  • Footer

RED:FOLIO includes 2 sidebars.
You can find them in Appearance > Widgets.

  1. Right Sidebar
    The right Sidebar displays on single blog pages, pages with "default template ", "regular blog page" and "blog masonry with sidebar".

  2. Sidebar WooCommerce
    The Sidebar WooCommerce displays on the right side of your shop pages.

SHORTCODES

Using shortcodes is very easy. To use one, create a new post (or edit an existing one), and in the the editor type a shortcode in brackets. You can find a demonstration and the code for all included shortcodes on the Shortcodes page of the theme demo.

Highlight

Highlight 1 uses black text, hightlight 2 white text. If you don't add a color value for the background color, the secondary theme color as set in the Theme Options Panel will be used.

[highlight1 color="#a3d7df"] highlighted text [/highlight1]
[highlight2 color="#a3d7df"] highlighted text [/highlight2]

Round Image

Simply upload your image via the Add Media button and wrap it with the Round Image shortcode. Uploaded image needs to be square (e.g. 300 x 300px)

[round_image]Image Goes Here[/round_image]

Button

Button which uses the secondary theme color as set in the Theme Options Panel:

[button link="http://www.fullURL.com"]Click me![/button]

Button which uses the secondary theme color as set in the Theme Options Panel and opens in a new tab:

[button target="_blank" link="http://www.fullURL.com"]Click me![/button]

Button with custom color and which opens in a new tab:

[button target="_blank" color="#a3d7df"" link="http://www.fullURL.com"]Click me![/button]

Tabs

[redsun_tabs][redsun_tab title="Tab 1"] Tab 1 content [/redsun_tab][redsun_tab title="Tab 2"] Tab 2 content [/redsun_tab][redsun_tab title="Tab 3"] Tab 3 content [/redsun_tab][/redsun_tabs]

Toggle

[toggle title="Toggle title"]
Hidden content
[/toggle]

Dropcaps

[dropcap] First Letter [/dropcap]

Pullquotes

[pullquote_left] Quote text [/pullquote_left]
[pullquote_right] Quote text [/pullquote_right]

Divider

[divider]

Column Shortcodes

Please find a demonstration and the code for the column shortcodes on the Shortcodes page of the theme demo.

Icons

RED:FOLIO includes the "Fontawesome" icon font.

This is how you add an icon to your posts and pages:

  • Choose your icon from here: Fontawesome

  • Add the code as follows (replace "fa-heart" with whatever icon you would like to use): <i class="fa fa-heart"></i>

    Example increase icon size x 5, and use light grey color: <i class="fa fa-heart fa-5x" style="color: #aaa;"></i>

    More examples here.

FILE INFO

Changelog

Version 3.00 - Released: 05/25/2019

IMPORTANT!

Version 3.0 is a major update to make the theme compatible with the latest WordPress Requirements for Envato Market, to make the theme safe and update the code to the latest coding standards. Most every file had to be changed in the process.

Please BACKUP your site before updating!

In order to ensure full functionality after the update, follow the steps below:

Before the update

  1. Backup
    Backup your site. You can use a Backup plugin for that.
  2. Google Analytics
    The Google Analytics field was removed from the Theme Options Panel. Please use a Google Analytics plugin instead

After the update

  1. Clear cache
    If your site doesn't display properly, please clear your browser cache.
  2. Save Theme Options
    Go to Appearance > Theme Options and save your Theme Options by clicking the Save Options button in the bottom right corner.
  3. Required / Recommended Plugins
    Install and activate the required (and recommended) plugins in Apperance > Install Plugins. You can find a list of all required and recommended plugins and an explanation in this documentation under Gettings Started > 2. Required Plugins.
  4. Save Permalinks
    If any of your pages doesn't display properly and you see a 400 error page instead, save your permalinks by going to Settings > Permalinks and clicking Save Changes.
  5. Rebuild your Thumbnails
    Some image sizes were changed to make the images look sharp on retina screens, so they need to be rebuilt. You can use the AJAX Thumbnail Rebuild plugin for that. Once the plugin is installed and activated, go to Tools > Rebuild Thumbnails, select all thumbnails and click Rebuild All Thumbnails.
  6. Logo
    The Logo uploader in the Theme Options Panel has been moved to the Deprecated section and will be removed eventually. Please upload your logo in Appearance > Customize > Site Identity instead.
  7. Favicon
    The Favicon upload field can now be found in Appearance > Customize > Site Icon.

Below the main changes are listed:

Fixed:

  • Data validation
  • Twitter section (now requires the "Custom Twitter Fedd" plugin)
  • Better code for videos in portfolio section

Improved:

  • Clean up all the code
  • Improved code/design for Theme Options Panel

Added:

  • Child theme

Moved:

  • The following functionalities were moved to a plugin:
    - Custom Post Types
    - Meta Boxes
    - Shortcodes
    - Share Buttons
  • The Theme Options Panel has been moved to the Appearance section.


  • Version 2.06 - Released: 06/12/2017
    • file: header.php, functions.php - Fixed: several code improvements
    • file: style.css, dynamic-css.php - Fixed: color in dropdown menu
    • file: scripts.js - Fixed: Allow fullscreen for videos in lightbox.
    • file: template-portfolio.php - Fixed: if portfolio category on portfolio page is selected, only images from that category are shown in lightbox
    • file: clients-section.php, options.php - Added: a few more client logo fields
    • file: functions.php, options.php - Added: load WooCommerce stylesheets if WooCommerce plugin is installed. No need to check checkbox in Theme Options Panel any more.
    • file: woocommerce.css, woocommerce_functions.php - Added: Support for WooCommerce 3.0.0
    • folder: layerslider and all files within - Added: Newest version of Layerslider.
    • folder: metaboxes and all files within - Added: Newest version of the meta box script.
    Version 2.05 - Released: 05/06/2016
    • folder: metaboxes and all files within - Added: Version 4.6 of the meta box script.
    • file: scripts.js - Fixed: Smooth scroll on front page, which stopped working in WP 4.5
    • file: twitter-section.php, tgm-activation.php - Fixed: Twitter section (now requires the Kebo Twitter Feed Plugin)
    • file: single-portfolio.php - Fixed: display right button color
    • file: header.php, functions.php - Added: Theme Support for Title Tag
    • folder: layerslider and all files within - Added: Newest version of Layerslider.
    Version 2.04 - Released: 10/15/2015
    • file: layout-responsive.php - Fixed: Home image on iPhone (white space on the right)
    • file: style.css - Fixed: Video icon size
    Version 2.03 - Released: 09/13/2015
    • folder: layerslider and all files within - Added: Newest version of Layerslider.
    • folder: fontawesome and all files within - Added: Newest version of Font Awesome icon font.
    • file: portfolio-section.php, template-portfolio.php, blog-section.php - Fixed: missing translation ready text.
    • file: options.php, social-section.php - Added: new icons to social section / footer: Houzz, Amazon, 500px, Tripadvisor
    Version 2.02 - Released: 06/25/2015
    • file: jquery.prettyphoto.js - Fixed: prettyPhoto XSS fix.
    • file: template-frontpage.php, scripts.js, dynamic-css.php, options.php - Added: Option to remove border around home image.
    • folder: layerslider and all files within - Added: Newest version of layerslider.
    • file: portfolio-section.php, template-portfolio.php, blog-section.php, loop.php, template-blog-style1.php, template-blog-style2.php, template-blog-style3.php - Added: all text translation ready.
    Version 2.01 - Released: 04/26/2015
    • file: class-tgm-plugin-activation.php - Fixed: XSS vulnerability fix.
    Version 2.00 - Released: 03/14/2015 - WOOCOMMERCE PLUGIN SUPPORT
    • file: woocommerce.php, product-searchform.php, functions.php, options.php / folder: woocommere and all files within - Added: WooCommerce plugin support
    • file: search.php - Added: Search also in portfolio subtitle field.
    • file: twitter-section.php, jquery.twitterpostfetcher.js, functions.php, options.php - Fixed: Twitter section.
    • file: scripts.js, functions.php, style.css, layout-responsive.css, portfolio-section.php, template-portfolio.php, team-section.php, blog-section.php, template-blog-style1.php, template-blog-style2.php, template-blog-style3.php, template-frontpage.php, jquery.lazyload.min.js - Fixed: page speed improvements, lazy load images.
    • file: scripts.js, template-frontpage.php - Fixed: multiple portfolio sections sorting.
    • file: functions.php - Fixed: thumbnail size for video.
    • file: template-frontpage.php, options.php, scripts.js - Added: Option to set minimum home title and section title font size for mobile devices.
    • file: functions.php - Added: Improvement of child theme support
    • file: style.css, layour-responsive.css - Fixed: slider layout.
    • file: mobile_detect.php - Fixed: isMobile returns true on desktop after Chrome's update.
    Version 1.02 - Released: 07/01/2014
    • file: options.php, config-meta-boxes.php, portfolio-section.php, template-portfolio.php, search.php - Added: option to link portfolio item to any URL
    • file: template-fontpage.php, config-meta-boxes.php, style.css - Added: Video section
    • file: scripts.js - Fixed: if portfolio category is selected, only images from that category are shown in lightbox
    • file: prettyphoto.css, loader.gif - Added: loading icon when lightbox opens
    • file: options.php, dynamic-css.php - Added: option to center client logos
    • file: options.php, client-section.php - Added: option to hyperlink
    • file: scripts.js, style.css - Fixed: load home image faster.
    • lient logos
    Version 1.01 - Released: 06/07/2014
    • file: archive.php - Fixed: archive template layout issue
    • file: options.php, social-section.php - Added: social icons Vimeo, Vine, Soundcloud
    • file: portfolio-section.php, template-portfolio.php - Added: Vimeo support
    • file: portfolio-section.php, template-portfolio.php, prettyphoto.css, scripts.js - Added: Show title and previous & next arrows in portfolio lightbox
    • file: functions.php, header.php - Fixed: mobile menu
    Version 1.0 - Released: 06/02/2014
    • Initial release.

    Theme Files

    CSS

    The following CSS files are included in the theme:

    Style.css (located in: main directory)
    Contains: Foundation for the site design. It controls the design structure of the theme. Be careful modifying this file so that you don't break the layout. I recommend making a copy before you edit this file.

    If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

    The file is separated into the following sections:

    
     0. CSS RESET 
     1. MISC 
     2. TYPOGRAPHY 
     3. LAYOUT 
     4. NAVIGATION 
     5. FOOTER 
     6. WIDGETS 
     7. IMAGES 
     8. BUTTONS 
     9. PAGINATION 
     10. COMMENTS 
     11. FORMS 
    
    

    dynamic-css.php (located in: /css)
    Contains: Styles as set in Theme Options Panel

    layout-responsive.css (located in: /css)
    Contains: responsive layout styles

    prettyPhoto.css (located in: /css)
    Contains: Styles for the prettyPhoto Lightbox

    font-awesome.min.css (located in: /fonts/fontawesome)
    Contains: Styles for icon font

    Java Script

    "RED:FOLIO" loads the following Javascript files:

    jquery.easing.js (located in: /js)
    Advanced easing options

    jquery.fittext.js (located in: /js)
    Flexible font size (for big headings) for responsive layouts

    jquery.fitvids.js (located in: /js)
    Used for fluid width video embeds

    jquery.isotope.js (located in: /js)
    Masonry portfolio and blog layout and sortable portfolio items

    jquery.neatshow.js (located in: /js)
    Fade in images beautifully.

    jquery.parallax.js and jquery.stellar.js (located in: /js)
    Background images with parallax effect

    prettyPhoto.js (located in: /js)
    Used to display images and multi-media in a "lightbox" that floats overtop of the current web page

    jquery.selectbox.js (located in: /js)
    Dropdown menu style

    superfish.js (located in: /js)
    Jquery improved dropdown menu

    jquery.waypoints.js (located in: /js)
    Execute a function whenever you scroll to an element (used for menu highlight on One Page)

    jquery.waypoints-sticky.js (located in: /js)
    Sticky navigation header.

    scripts.js (located in: /js)
    custom jQuery

    FAQ & Troubleshooting

    How to update a theme

    1. Start by logging into Themeforest with the account that you've used to purchase your theme.
    2. Click Downloads and re-download the theme you've purchased. You will automatically get the newest version.
    3. Go to your WordPress admin and click Appearance > Themes . Activate any different theme, choose delete files for the old REDFOLIO theme and then upload the new theme and activate it. If you attempt to upload a new version of a theme without deleting the old version first, the theme install will fail.
    Deleting the old theme may seem scary, but you are not going to loose any of your content or theme settings. You will only lose the changes that you've made directly to the theme files. These changes will need to be made again to the new files.
    If you are still uncomfortable deleting the old theme, you may use a plugin, like for example Easy Theme and Plugin Upgrades to automate backing up your current theme and uploading the new version. In case something goes wrong, you can simply change back to the old theme.

    IMPORTANT!: As update 3.0 was a major update, if you are updating from version 2.06 and below, please follow the instructions in the changelog.

    How to translate a theme

    RedFolio can be translated into any language without having to edit the template files.

    1. Go to Settings > General and set the Site Language to your language.
    2. Download Poedit, which is a free, open source tool.
    3. Look for the the redfolio.pot file, which is included in your theme files (in the subfolder "languages") and open it with Poedit.
    4. Click "Create New Translation", select your language and click OK
    5. You should see a list of all strings (in English) used in the theme. Go through the list and click on the text that you want to translate. When you click a line of text, the same text will appear at the upper of the 2 boxes at the bottom. Enter the translation for the text in the lower box.
      • If you right-click on any line, you’ll see a file name and line number like “archive.php line 71″. That is the place in the theme files where this text is being used.
      • If you are looking for a certain text that you want to translate, click Edit > Find .
    6. In Poedit > Preferences > Editing, make sure Automatically compile MO file when saving is checked. That way, when you click File > Save as, it will automatically output a .po and .mo file. The naming of your .po and .mo files is important. The naming convention is based on the language code (e.g. pt for Portuguese) followed by the country code (e.g. _PT for Portugal or _BR for Brazil). So, the Brazilian Portuguese files would be called pt_BR.po and pt_BR.mo. A complete list of codes can be found at language codes and country codes. Save the translation files in the same folder as the redfolio.pot file.

    You can always open your .po file again (in Poedit) and add translations.

    Theme Installation Error “The package could not be installed. The theme is missing the style.css stylesheet.”

    Make sure you are not uploading the whole zip file that you've downloaded from Themeforest (including demo content, license, psd files, readme ...) but only the redfolio.zip file.