Introduction

Welcome to the Safarica WordPress theme documentation by Meks.

If you're having an issue and can't find the answer here, please contact us via contact form on MeksHQ.com and we will try to answer you as soon as possible. Also, feel free to suggest any new features you may want in this theme and we will consider adding it for the next update(s). Once you have purchased this theme you would have all access to the upcoming theme updates.

We have put a lot of effort into making every piece of this theme right in place. Please don't forget to rate Safarica theme on ThemeForest if you like it.

Cheers,
Meks Team

Installation

Extract the zipped package downloaded from ThemeForest to your desktop, in the extracted package you will find safarica.zip file which is the WordPress theme.

You can install the theme in two different ways:

  • FTP Extract safarica.zip file and upload the extracted folder to /wp-content/themes/ folder on your server. If you are not familiar with FTP method, you will have to use some of FTP sofwtare, for example FileZilla.

  • WordPress Navigate to Appearance -> Add New Themes -> Upload page. Select safarica.zip file. Press the Install Now button to upload and install the theme.

After uploading the theme, you have to activate it. Navigate to Appearance -> Themes page to activate the theme.

Check this page made by ThemeForest on how to install a WordPress theme correctly: ThemeForest knowledge base

HOW TO DO SAFARICA THEME UPDATE WITHOUT LOSING ANY DATA?

Automatic

  • Navigate to Theme Options -> Updater and specify your ThemeForest username and API key

  • Once the new update is available, you will be notified via Dashboard -> Updates screen alongside other installed themes and plugins. And you just update Safarica with a single click.

Manual

  • Download the latest .zip package from ThemeForest and extract it

  • Find "safarica" folder inside the package

  • Use FTP to overwrite current theme folder on your server with new one

Re-Install

If something goes wrong during an update, don't panic. You can always do the following without losing any data and settings:

  • Deactivate and delete currently installed Safarica theme

  • Install the latest version

Inserting Demo Content

For a quick and easy setup, there is a demo content XML file included in the package so you can get the content similar to our demo website as a good starting point. We suggest you to use it because this way you will have some good setup overview before you start with your own setup.

  • Find demo content XML file safarica_demo_content.xml located inside the package you have downloaded form ThemeForest.

  • In your website admin, Go to Tools -> Import. Then at the bottom of the page, click to install WordPress importer and then upload safarica_demo_content.xml via this tool.

Safarica uses standard WordPress menu system for navigation. In order to setup top navigation menu, go to Appearance -> Menus.

You simply need to create your menu and drag and drop pages you want to show in header navigation. After menu is created, you need to assign this menu to Safarica Top navigation, as shown on the image below.

Theme Options

Safarica theme provides plenty of options divided into several sections. In the list below, we will just give you some good overview. Almost every specific option is described inline in the Theme Options admin panel.

  • General Here you can find the options which apply to your website globally.

  • Fonts Here you can customize your fonts as well as some text options.

  • Colors Here you can manage all your website colors.

  • Header These are options to style your website header/navigation area.

  • Slider Here you can manage options for your home page slider.

  • Home Page These are the options which will affect your home page.

  • Archive Templates You can use this options to manage setting for WordPress common archive templates such as categories, tags, authors, search, etc...

  • Single Post Use these options to manage your single post template.

  • Contact This options will apply to your "Contact" page template. Here you can setup contact form and Google Map.

  • Footer These are options to style and manage your website header/copyright area.

  • Social Use these options to specify all URLs to your social profiles so you can use them within the theme later.

  • Import/Export Nice tool where you can save and backup all your theme options. It can be very useful if you want to copy and import your option settings to another site which is using Safarica theme, i.e when moving your site from localhost to live server.

Home Page Setup

Note: If you have inserted our demo content, example Home page will be added already so you can skip the first step described below.

  • If you want to create Home Page, first go to Pages -> Add New and create another page. Under template setting, choose "Home Page" template.

  • Second, go to Settings -> Reading and select "Front page displays a static page" option. Then choose your "Home Page" from page selection below.

  • On your home page edit screen, you also have a set of display options so you can choose what post data you want to show on home page. You may want to display only post titles with featured images, or you may want to show post content with category/date/comment links, etc...

  • For additional setup, go to Theme Options -> Home Page and follow provided options. You can enable/disable slider, enter your welcome text, choose posts layouts, etc...

Slider Setup

Safarica theme also gives you a possibility to use featured slider on the home page and point out some of your important stories. Go to Theme Options -> Slider and check some quick and easy setup options. You can choose several slider layouts as well as what type of posts you want to show in slider.

Blog Pages Setup

Main focus of this theme is to provide flexible and useful blog. Safarica theme gives you a possibility to create unlimited number of blog pages with different layout and style. Here are the options you can choose in order to setup your blog pages as you like.

Creating a Blog page - layouts

In order to use blog page on your website, first go to Pages -> Add New. In the page template selection box, you can choose from 5 templates for specific blog page.

  • Blog 1-Column Full-Width Posts on this blog page will be listed in one column, as full width of the website, with standard pagination. No sidebar here.

  • Blog 1-Column With Sidebar Posts on this blog page will list in one column, with sidebar on the right/left and standard pagination. This is the most common WordPress blog style.

  • Blog 2-Columns Full Width This template will list posts in two columns, with no sidebar. Instead of pagination, you have load more button at the end of the list to load next posts on the page.

  • Blog 2-Columns With Sidebar This template will split posts in two columns, with sidebar and standard pagination.

  • Blog 3-Columns Full Width This template will split post in three columns as a website full width with no sidebar. Load more button is provided.

Blog Display Options

For each blog page, you have a set of display options so you can choose what data you want to show on specific blog page. You may want to display only post titles with featured images, or you may want to show your content and category/date/comment link, etc... You can also specify number of posts to show for specific blog page. Use your best pick.

Blog Categories

Idea of different blog layouts and display option came from idea that you may want to use different blog styles for different categories on your website. So, there is also an option to display posts only from specific categories on specific blog page.

Blog Sidebars

Safarica theme provides posibility to create unlimited sidebars. And that's not all, you can set to display different sidebars for different blog pages using this box below. Actually, you can choose different sidebar for any page which is using a sidebar (not full width), not only a blog page.

Other Pages

Apart from "Home" page template and "Blog" page templates, you can use several more page templates.

  • Default This is a default WordPress page with sidebar.

  • Full Width Page This is a full width page, which means a page without sidebar.

  • Contact Contact page provides possibility to display integrated contact form functionality, as well as show your location with Google Map.

Posts Setup

Safarica provides all common WordPress post features and functionality, as well as some more cool features and customization which are described below.

Post Options

For a global setup, navigate to Theme Options -> Single Post and follow provided options.

  • Layout You can choose whether your single posts will display as a full width or with sidebar.

  • Display options Just as for blog pages, you can customize display options for single posts.

  • Social Share Safarica provides integrated social sharing system so you can use several share options for your posts.

Once you have checked the post options, you can go and edit each specific post with some more options.

Post Colors

This theme provides a feature to set specific color for each post. When you are on the single post admin screen, look for a box with name "Colors".

You have the option to set specific background and text color for each post which will apply to the post title and post footer as well as for some other meta information connected to a specific post.

Note: By default, "Inherit" checkbox is checked, which means that this post will inherit meta colors from post colors settings defined on global level inside Theme Options -> Colors. So you need to uncheck this field for each post you want to show its original color.

If you don't want to use color feature, the best way to do this is to always keep "Inherit" option checked.

Post Featured Media Display Options

Alongside common featured image, each post have an option to display a featured video or a featured gallery instead.

Post Featured Video

This theme supports YouTube and Vimeo videos. You just need to paste video id into specific field. Also, for a better display within the theme, you can specify video ratio as well.

Post Featured Gallery

To setup post featured gallery, click on the Add/Edit link, next to the featured gallery option.

The page will open pop-up window where you can upload/edit your images attached to specific post.

Note: After the images are uploaded, they are already attached, so avoid clicking "Insert Gallery" button. We don't want to insert this images into a post content, they will be displayed automatically.

Post Sidebars

Just as for each page, you can set specific sidebar for each post as well.

As you are able to pick different sidebar for each post/page, Safarica provides a possibility to use unlimited number of sidebars. By default, you have 5 predefined sidebars you may want to use.

  • Home Sidebar This sidebar will be displayed on your home page.

  • Blog Sidebar By default, this sidebar will be displayed on your single post template.

  • Page Sidebar By default, this sidebar will be displayed on your page templates.

  • Archive Sidebar This sidebar is displayed on the archive pages, such as tags, categories, author, search, etc...

  • Footer Footer is completely widgetized so you will use this sidebar to manage widgets in footer area.

For additional custom sidebars, go to Theme Options -> General and you will find an option to specify number of additional sidebars.

Finally, after saving theme options and when you go to Appearance -> Widgets you will see all predefined and custom sidebars ready for use.

Widgets

Apart from standard WordPress widgets, Safarica theme provides 8 additional custom made widgets. All these widgets have Safarica prefix:

  • Safarica Flickr You can display your flicker photo-stream with this widget.

  • Safarica Posts Similar to WordPress post widget but with more options provided, you can choose post only for a specific category and choose your order type. Styled to fit Safarica theme look.

  • Safarica Video You can easily display YouTube or Vimeo videos with this widget.

  • Safarica Ads Great solution if you are using advertisement on your website. You have an option to put 150x150 or 300x250 ads here.

  • Safarica Adsense If you are using Google Adsense, you can put your ad-sense script inside this widget. Actually, not only Google Adsense, you can put any JavaScript related advertising service here.

  • Safarica ThemeForest You can display your or other users ThemeForest items here, with affiliate links as well.

  • Safarica Social Box You can use this widget to display up to 40 social icons which this theme supports.

  • Safarica Author You can use this widget to display author/user profile info.

Shortcodes

Shortcodes are powerful feature for any WordPress theme which provides it, and they may be used for extra styling and functionality of the specific content. Safarica themes provides several shortcodes with ability to combine them with each other inside of any page content.

While you are in page/post admin, set your content editor to visual mode, and click Shortcodes button in order to open shortcodes editor screen.

  • Columns You can use this shortcode to split you page into columns and point out some important parts of your page content. They can be used in conjunction with any other shortcodes. You can write any content or insert any shortcode between column tags.

    Usage example:

    [mks_one_full]
    
    [mks_one_half] Left content goes here [/mks_one_half]
    
    [mks_one_half] Right content goes here [/mks_one_half]
    
    [/mks_one_full]
  • Separators These are simple horizontal line elements which you may use to divide some areas within your page content. Several styling options are provided.

    Usage example:

    [mks_separator style="solid" height="2"]

  • Buttons Basically, these are links with button style. You can target any URL here.

    Usage example:

    [mks_button size="large" title="Button" style="squared" url="http://mekshq.com" target="_self"]

  • Dropcaps Dropcaps are mostly used to make big first letter of specific sentence.

    Usage example:

    [mks_dropcap style="standard"]A[/mks_dropcap] smart theme Safarica is.

  • Lists Use this shortcode to wrap and add some special styles to your ordered/unordered lists.

    Usage example:

    [mks_list type="ul" style="ul_bullet"]
    	First item
    	Second Item
    	Third Item
    	...
    [/mks_list]

  • Highlights You can add colored background to some part of the text with this shortcode.

    Usage example:

    I can't wait to see how [mks_highlight color="#dd3333"]awesome[/mks_highlight] Safarica theme is.

  • Boxed Quotes Stylish boxes with option to place it inside any text on the page and point out some important words.

    Usage example:

    [mks_boxquote align="left" width="450" arrow="right"]He who dares wins![/mks_boxquote]

  • Social Icons Add your social icons inside page/post content with this shortcode.

    Usage example:

    Follow me: [mks_social icon="facebook" style="squared"] [mks_social icon="twitter" style="squared"]

This theme also provides ability to use shortcodes in sidebars. Use standard WordPress Text Widget and paste any shortcode into the text field of the widget.

Using Fonts

Safarica theme gives you an option to use up to three different fonts. To edit fonts, go to Theme Options -> Fonts.

  • Heading font This font will be used for headings on your website, such as post/page titles, widget titles, etc...

  • Text Font This is your common text font, will be used for any website content.

  • Top Navigation font This font will be used for top navigation inside your website header.

You have probably noticed that each of those three fonts have two fields in options: Link field and Family field. That is how many fonts actually works on most of the websites so instead of selecting limited amount of fonts, Safarica gives you endless possibilities with this two options.

If you are using any common fonts which will be recognized by all browsers, such as Arial, Helvetica, Times New Roman, etc... you can leave link fields empty and use family fields only. Check some common font families here.

Using Google Web Fonts

Safarica theme supports Google Web fonts so here is a short tutorial how you can use it. First go to Google Web Fonts directory. When you find some font you think it might look good with the theme, click on the "Quick Use" icon as show on image below.

Button will open a page with some additional font settings which will generate font link and font family codes for you. Then you just need to paste these two lines of text into Theme Options font fields. First one is for the link field, second is for family field. And that's it.

FAQ

My navigation won't save its settings

That's most probably because you haven't installed the theme properly. Common mistake is that you copy/install entire package you have downloaded from ThemeForest, please make sure that you have extracted the package first and use proper file/folder.

Why do I get 404 error for some of my posts/pages?

That's because WordPress website usually needs re-save of your permalink structure when you transfer the website. In admin panel, go to Settings -> Permalinks and just save settings again.

I'm having problems to upload captcha font

This problem most probably appears because some servers sometimes treat font files as "unsecured" and may not allow you to do this.

Anyway, you have another option for manual font upload via FTP. You can manually upload your font file inside wp-content/uploads folder and then just specify full name of the font file in Manual font upload text field in Theme Options -> Contact admin page. Also, make sure the file permissions to uploaded font file are set to 755 or even 777.

How can I attach a featured gallery to a post?

When you are on post edit screen in admin, look at the bottom of the page for a section box named Media Display Options which has three options. Select Slider Gallery option here.

Next to slider gallery option, there is a link that says Add/Edit, click on it.

It will open pop-up which manages images for this item. Simply upload your images and Gallery tab with number of images attached to item should appear automatically at the top of pop-up screen. You can change image order and properties within this tab if you want. Close the pop-up, then update post, and that's it!

Note: You can't add already uploaded images attached to some other item(post), you need to upload new images. That's because WordPress itself doesn't allow one specific image to be attached to multiple posts. So if you want the same image to appear for different posts, you need to upload it twice.

Changelog

Version 1.5

  • Added: RTL support (for right to left writing/reading)

  • Added: Now blog page templates can be used for home page as well

  • Added: Allow shortcodes inside page subtitles

  • Added: Support for paginated content on pages using <!--nextpage--> tag

  • Added: Option to use home page content editor for welcome box text instead of general option (handy for multilingual websites)

  • Improved: Dynamic CSS from theme options now uses different logic to improve page speed

  • Improved: Prevented pagination issue on homepage caused by Facebook WordPress plugin

  • Fixed: Missing shortcodes button image in WP 3.9

  • Fixed: Pagination issue on search page when using more than one word in search query

= 1.4 =
* Added: Built-in translation options for easy string translation or replacing
* Added: Theme Updater in theme options - One Click Updates!
* Added: Support for paginated posts using  tag
* Added: Option to remove prev/next post links on single post template
* Added: Option to hide post titles in slider
* Added: wp_title hook for better compatibility with SEO plugins
* Added: Possibility to exclude main top navigation
* Added: Soundcloud social icon
* Added: Foursquare social icon
* Improved: Exclude comments icon if post comments are closed
* Improved: Minor CSS improvements

= 1.3 =
* Added: Author Widget
* Added: Social Profiles Options for each User
* Added: Couple of SEO improvements across entire theme
* Added: Google Authorship Support
* Added: Option to select "latest + sticky posts" on home page
* Added: Option to select "latest + sticky posts" in slider
* Added: CC and BCC email options for built-in contact
* Added: Autoplay option for Safarica Posts Widget
* Added: Safarica custom widgets support for "Accessibility mode"
* Added: Add comments support on pages
* Added: Child theme included in package
* Fixed: Contact form map scrolling issue
* Fixed: User website URL not showing in comments
* Fixed: Responsive CSS improvements
* Fixed: Minor CSS fixes

= 1.2 =
* Added: Option to specify header/navigation bar height
* Added: Option to manually position your logo
* Added: Option for custom logo url
* Added: Option to display video/gallery featured media on home/blog/archive pages
* Fixed: Flexslider Windows 8 / Chrome bug

= 1.1 =
* Added: Option to pin header to top
* Fixed: Slyder type option bug
* Fixed: Tag archives title style bug
* Fixed: Wpautop filter conflict with some plugins
* Fixed: Minor CSS issues

= 1.0 =
* Initial release

Sources and Credits

JavaScript:

  • jquery.flexslider-min.js - http://flexslider.woothemes.com

  • masonry.pkgd.min.js - http://masonry.desandro.com

  • imagesloaded.pkgd.min.js - https://github.com/desandro/imagesloaded

  • selectnav.min.js - https://github.com/lukaszfiszer/selectnav.js

  • jquery.carouFredSel-6.2.0-packed.js - http://caroufredsel.dev7studios.com

PHP:

  • Redux Options Framework - http://reduxframework.com/

  • Simple PHP Captcha script - http://www.abeautifulsite.net/blog/2011/01/a-simple-php-captcha-script/

Icons

  • Fontello - http://fontello.com

Images:

Images used on demo website are purchased from ShutterStock and they are all credited to their respective creator/owner. These images are not included in theme package.