UPFront Wordpress Theme Documentation


Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to publish your question here.
Thanks so much!

Installation


To use a WordPress theme you must have a working version of Wordpress already installed. For information in regard to installing the WordPress platform, please refer to the WordPress Codex here

  1. Extract the package file
  2. After extract the main zip file, you'll see these folders and files:

    • upfront folder - main theme folder
    • upfront.zip - zipped theme
    • Documentation folder - help file
    • upfront-child folder - Child theme folder
    • Log folder
  3. Install theme file
  4. This template works well for WordPress 4.2, update yours if needed.
    Installing the theme can be done in 3 ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

    • Using the Envato WordPress Toolkit plugin: Please refer this post.
      Note: How to get the API Key of themeforest(new version)? Refer this post.

    • Using WordPress Theme Upload:
      Be sure to extract the file "UPFront.zip" from the ThemeForest download before uploading. Using the ThemeForest ZIP file directly will result in a "Missing Style Sheet" error.
      • Login to your WordPress admin.
      • In the "Appearance > Themes" menu click the tab "Install Themes".
      • At the top of the page click, "Upload", then click the file input to select a file.
      • Select the zipped theme file, "UPFront.zip", and click "Install Now".
      • After installation you will receive a success message confirming your new install.
      • Click the link "Activate".
    • Using FTP:
      • Login to your FTP server and navigate to your WordPress themes directory.
      • Normally this would be "wp-content/themes".
      • Extract folder "UPFront" from the zipped theme.
      • Copy the folder "UPFront" to your themes directory.
      • After the files finish uploading, login to your WordPress admin.
      • In the "Appearance" menu click "Themes".
      • Click "Activate" for the theme "UPFront Responsive Retina Ready Multi-Purpose WP Theme".
  5. Theme update
    • Using the Envato WordPress Toolkit plugin: Please refer this post.
    • Using WordPress Theme Upload:
      • Please download the theme file from themeforest.net
      • Remove the installed Minds theme
      • Install the theme again(upload the latest UPFront.zip)
    • Using FTP:
      • Please download the theme file from themeforest.net
      • Unzip UPFront.zip, get UPFront folder
      • Upload/replace minds folder by ftp

1. Recommended Plugins

After activating the theme, you would notice the message box on the top of admin pages to ask you install/activate some plugins, you could use them for free or cancel the messages.


To set up logo for your website, you need to:

  1. Go to the WordPress Admin Dashboard.
  2. Click on the left sidebar item named "UPFront" to open the ThemeOptions panel.
  3. Go to ThemeOptions > General Settings > Logo section, here you could upload a logo image or input logo text.

The recommended logo image size is 160px(width) * 60px(hight), this is the container size. If you want the logo be displayed clearly on retina screens, you need to upload a double size image logo(e.g. 320px x 120px).


3. Skin

8 predefined colour scheme for your website, please go to ThemeOptions > Schemes

There are many detail colour setting options for every scheme, you could define your own style base on the given scheme setting. Click on the small icon "?" on the right side description for every item to learn detail explanation for the option.


4. Frontpage

To set up the homepage, you need to create a page which you want to use it as homepage, after that, go to ThemeOptions > FrontPage section to select the page from drop-down menu.


5. Generate New Thumbs for This Theme

If there have been some images in your site already, please click the button. It will generate the right size thumbs for the images.

Before building your custom menu, you need to create your pages first, then navigate to Appearance > Menus, it is recommended to create you menu from Pages or Links.

Mega Menu:

7. RTL

If you want to use RTL layout, please go to ThemeOptions > Layout, activate the "RTL" option

8. Theme Custom

If you want to change style of theme, please go to ThemeOptions > General Settings, put your css code to Cutom Css box.
You could also use Child theme also, put the cutom css to custom.css file. Refer more about child theme

7 Post Formats

UPFront provide 7 formats for your post, theses formats would affect the layout of your post in list and content page. You need the to click on the radio button to change the format for a post:

Sliders

please go to Wordpress Admin Panel: BM Slider > Add New.



You need to pickup a category for slider, the category in this slider need to be set featured image.

Go to Page / Add new, you could build all kind of pages you like.

Blog Template

Archive Template



Please pick up this option to create a archive page:

No Template

Set "No Template", you could create a static page. You could use Wordpress default editor or UPFront Page Builder to create the content.

General Options

UPFront provide drag & drop page builder for your pages("No Template" need to be set), press the button "Switch to Page Builder" to enable it. Following is a brief introduction for the page builder:

1. Wraps

The modules could be placed directly into the panel or be dragged into a wrap, depending on your layout. A standard wrap have the same width with page content.

Fullwidth Wrap

A fullwidth wrap have the following features:

 

2. Modules
3. Save and Load templates

Once you have build a layout via the page builder, and you want to clone them to other page/posts, you could save the current layout to a template and load then in the other page/post page builder section.

When you edit the text via a text editor, you could use Short Code to add some advanced elements to your page/post:

Following are the short-code elements this theme support:

  1. Po/Mo files

    To translate the static strings, it is recommended to download PO Edit here. After installing the PO Edit please follow the following steps:

    1. Open the /UPFront/languages/ folder and duplicate the default.po file, then rename it to your desired language code. For example, for German you need to rename it as de_DE.po for Spanish es_ES.po for Turkish tr_TR.po etc. You could find all the codes here.
    2. Open the .po file in PO Edit, you will see all strings that need to be translated. Type the translation of a string into the "Translation" column. Do not delete or edit "Original string" part.
    3. After finish translating, save the file, an .mo file would be created in the same directory.
    4. Upload the new files into the languages folder of the theme /wp-content/themes/pinpoint/languages/ and then follow this guide: http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Single-Site_Installations.

    Note: You will notice the content of "default.po" is very complex, you could use the reduced version named "defaule_frontend.po" to edit necessary strings which will be show on front end.

     

  2. Multi-language

    UPFront is translatable and multi-language ready, it is recommend to use the popular WPML wp plugin.

    To translate the copyright information, Comment title and so on, please:

    1. Install the plugin WPML String Translation.
    2. Go to left menu: WPML/String translation
    3. Find the following string:
    4.                   [ux_theme_option]theme_option_copyright
                        [ux_theme_option]theme_option_descriptions_comment_title
                        [ux_theme_option]theme_option_descriptions_your_message
                        [ux_theme_option]theme_option_descriptions_comment_submit
                        [ux_theme_option]theme_option_descriptions_related_posts_title
                        [ux_theme_option]theme_option_descriptions_read_more
                        [ux_theme_option]theme_option_descriptions_load_more
                        [ux_theme_option]theme_option_descriptions_follow_us
                        

    5. Click on the “translations” on the right side of every string item, enter the target translated words, check on “Translation is complete" and save it.

On admin panel the left hand, click "UPFront" to enter Theme Options

From Theme Options, you could:

  1. Javascript files
    1. Bootstrap 2.3.1 - styles/bootstrap.js - Some js for Bootstrap layout
    2. main.js - main js plugins: Waypoints v2.0.4, Flexslider v2.2, isotope, Modernizr 2.7.1, debouncedresize, DoubleTapToGo, imagesLoaded v3.1.6, SmoothScroll v1.2.1, Magnific Popup v0.9.9
    3. jquery.jplayer.min.js - js/jquery.jplayer.min.js - HTML5 media player plugin
    4. infographic.js - js/infographic.js - For infographic of pagebuilder, included: bar, Knob v1.2, animateNumbers
    5. jquery.countdown.min.js - js/jquery.countdown.min.js - For Count Down module of pagebuilder
    6. One Page Nav - js/jquery.onepagenav.js - Onepage navigation
    7. Queryloader v2 - js/jquery.queryloader2.js - Page loading
    8. Hoverdir v1.1.1 - js/jquery.hoverdir.js - Portfolio moudle of pagebuilder mouseover effect / mask
    9. carouFredSel 6.2.1 - js/jquery.caroufredsel.js - For Carousel
    10. Gray - js/jquery.gray.min.js - Portfolio moudle of pagebuilder, make the thumbnails gray
    11. theme.pagebuilder.js - functions/pagebuilder/js/theme.pagebuilder.js - UPFront pagebuilder main js
    12. custom.theme.js - js/custom.theme.js - UPFront theme main js
  2. CSS files
    1. Bootstrap 2.3.1 - styles/bootstrap.css - Bootstrap layout
    2. UPFront Pagebuild css - styles/pagebuild.css - Pagebuild layout and module style
    3. styles/magnific-popup.css - - Lightbox jquery plugin css
    4. style.css - style.css - UPFront theme main css

Once again, thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to publish your question here.

Thanks,
uiueux studio