1.1 How To Install Jannah Theme

You can install the theme in two ways: through WordPress or via FTP.Before you can install Jannah, you need to download the necessary theme files from your ThemeForest account.


1.1.1 Downloading Jannah Theme Files From ThemeForest

If you already downloaded the theme after you first purchased it, you may have a file called something like “themeforest-15966053-jannah-responsive-news-wordpress-theme.zip“. If that is the case be sure to extract the zip file, and inside it browse to jannah.zip. The jannah.zip file is the one you want to upload to WordPress.

If you did not download the theme after purchase, then you will want to log into ThemeForest and go to your “Downloads” and download the “Installable WordPress file only” zip file.


1.1.2 How To Install Jannah via WordPress

  1. Navigate to WordPress Dashboard > Appearance > Themes.
  2. Click the ‘Add New’ button on top of the page, then the ‘Upload Theme’ button.
  3. If you’ve downloaded the installable WordPress file, then you do not need to unzip the file. If you’ve downloaded the Full Theme Package, you have to unzip the master themeforest-15966053-jannah-responsive-news-wordpress-theme.zip file, you will see thejannah.zip file, this is the one you select to install.
  4. Click ‘Choose File’ and select the jannah.zip file.
  5. Once the file has uploaded, to activate Jannah go to WordPress Dashboard > Appearance > Themes and click the Activate button.
If you get the “Are You Sure You Want To Do This” message when installing jannah.zip file via WordPress, it means you have an upload file size limit that is set by your host. If this happens, please install the theme via FTP or contact your hosting company and ask them to increase the limit.

1.1.3 How To Install Jannahusing FTP

  1. Log into your server installation via FTP. You can use software such asFilezillafor this.
  2. If you have downloaded the Full Theme Package from ThemeForest, please unzip the master themeforest-15966053-jannah-responsive-news-wordpress-theme.zip file and then unzip the jannah.zip file which will give ajannah folder.
  3. Upload the extracted jannah folder to thewp-content > themesfolder on the server. Make sure the folder name is -> ‘jannah’.
  4. Log in to your WordPress Dashboard and navigate toAppearance > Themesand clicking the ‘Activate’ button, for the Jannah theme.

1.2 Server Requirements for Jannah

To use Jannah, you must be running WordPress 4 or higher,  PHP 5.6 or higher, and MySQL 5.6 or higher. Jannah has been tested with Mac, Windows, and Linux. Below is a checklist of items your host needs to comply with to ensure proper Jannah operation:

  • Ensure your web host has the minimum requirements to run WordPress.
  • Make sure the latest version of WordPress is up and running.
  • If necessary, you can download the latest release of WordPress from the official WordPress website.

1.2.1 PHP Configuration limits

Issues you may encounter, such as demo content fails when importing and similar issues, are generally related to excessively low PHP configuration limit settings. You can either increase these limits on your own or contact your web host and ask to have the limits increased to the following minimums:

  • memory_limit 128M
  • max_input_vars 3000
  • max_execution_time 180
  • post_max_size 32M
  • upload_max_filesize 32M
  • allow_url_fopen ON

1.2.2 Verify your PHP limits

You can check them by installing the  WordPress phpinfo() plugin and checking Settings. The first column refers to your installation value, and the second column refers to the limits of your host. The latter values are often lower if you have selected a cheaper hosting package.

You can always contact your host to ask what the current settings are, and have them adjusted if necessary. Some hosts will try to keep PHP limits low to conserve resources. Since are paying for those resources, you should rightfully expect to be getting your money’s worth.


1.3 How to increase the PHP Max Input Vars

The PHP Max Input Vars is the maximum number of variables your server can use for a single function. To work properly with a modern WordPress theme set this value to 3000. Lower values can create problems such lost data in your Theme Options, Widgets disappear etc.


1.3.1 How to increase the PHP Max Input Vars

Like the other values above, you’ll need to access and modify either the php.ini or the .htaccess files. Most hosts won’t grant you full access to modify the PHP.ini file because it affects the whole server and all the websites hosted on it.Please contact your host first to find out if they can adjust it for you.

For advanced users who have their own server setups and full access to the php.ini file, please go ahead and try Method 1 first before the other method. For standard users, we encourage you to try Method 2 instead.


Method #1: edit the PHP.ini file

NOTE: many shared hosts prohibit you from having direct access to the PHP.ini file. Only do this method if you have direct access to your PHP.ini file or if you’re on your local host.

  1. Locate your PHP.ini file. If you can’t find it, then you can create your own PHP.ini file in the root folder of your WordPress installation.
  2. If you find your existing PHP.ini, open the file and locate the following line of code (xx represents a number):max_input_vars = xx; And set it to your desired limit. For example, 3000.
  3. If you created your own PHP.ini file, then add the same code inside it: max_input_vars = 3000; Simply change the value to the recommended value. For example, 3000.
  4. Save your changes, and reboot your localhost or your server.

Method #2: edit the .HTACCESS file

NOTE: make sure to back up your .htaccess file before editing.

  1. Locate your .htaccess file which is usually in the root folder of your WordPress installation. If you can’t find it, it may be because it’s hidden. Here’s a tutorial for Windows and a tutorial for Mac on how to reveal hidden files on your computer.
  2. Open the .htaccess file with a text editor program (Notepad or TextEdit) and add the following line of code:php_value max_input_vars 3000. Simply change the value to the recommended value. For example, 300.
  3. Save the file and refresh your website.

1.4 Increasing the WordPress Memory Limit

Here you are 4 common methods used to increase the server memory limit:


1.4.1 Increase the limit via PHP.ini file

You can directly increase the PHP Memory Limit if you’ve access to the PHP.ini file. Most small Shared hosting servers won’t give you access to the PHP.ini file. But some servers allow you to create a duplicate PHP.ini in your respective site Directories whose data/values will override the default PHP.ini values. To do that you just need to create a file with the name ‘php.ini’ in the directory where your WordPress site is installed. In that just add the command

memory_limit = 512M

in it to increase the Memory Limit to 512 MB.


1.4.2. Changing the Memory Limit via wp-config.php

If you don’t want to mess with the PHP.ini file, then you can go for this method. In this you won’t be needing to create any extra file in your Directory. Just Adding

define('WP_MEMORY_LIMIT', '512M');

in your ‘wp-config.php’ file would increase your PHP Memory Limit to 512 MB.

Or you can also add this line

ini_set('memory_limit','512M');

in wp-config.php file to do the same job.


1.4.3. Modifying the .htaccess file to Increase Memory Limit

A Default WordPress Installation won’t have a .htaccess file. But in case you already have it for some purposes like ‘301 Redirection’, just add the command

php_value memory_limit 512M

in your ‘.htaccess’ file and your memory limit will increase to 512 MB.


1.4.4. Have a talk with your Host

If you are a person who is new to all these techie sounding things then, it’s better to have a Live Chat / a Call with your Host right away. It’s your right to talk to them and get the necessary changes you need as you’ve paid for it.

This theme may be updated periodically in order to add new features and fix bugs. When a new update be avilable an update message will appears on your blog dashboard . As a customer, you can download the most current version from your ThemeForest account.

2.1 Updating Automatically

Envato have developed the Envato Toolkit Plugin for WordPress. You can use this to receive notification of updates to themes purchased from ThemeForest and to automatically update (upon clicking) directly from within your WordPress admin area.

  1. Download the plugin zip file to your computer.
  2. In your WordPress admin area, go to Plugins > Add New then click Upload.
  3. Click Choose File, select the plugin zip file you downloaded and click Install Now.
  4. After installation, click Activate.
  5. Click the new Envato Toolkit link in the menu and follow the instructions to configure the plugin.

2.3 Updating Manually

  1. Download the most current version from ThemeForest in the "Downloads" area of your account.
  2. Unzip the package and locate Jannah.zip in the theme folder.
  3. Go to Appearance > Themes and activate another theme such as the default WordPress theme.
  4. Delete the Jannah theme which is now inactive.
  5. Go to Install Themes > Upload then install and activate Jannah.zip from the new package.

If you are migration from a theme which used the native featured images functionality of WordPress. Please use the Regenerate Thumbnails plugin to resize all the thumbnails. Click the link above and download the free plugin, and read through the steps it contains, it has all the information you need.

All of our Themes are able to be translated into any language. The process of translating the theme is a user responsibility. The following instructions are given as guidance.

  1. Open wp-config.php and replace this: define ('WPLANG', ''); with this (subsitute the language string (bg_BG) with your own!): define ('WPLANG', 'bg_BG');
  2. Download and install POEDIT
  3. Connect to your site -> open your theme/languages directory
  4. Download the default.po file and open it with POEDIT.
  5. Translate file and save it as bg_BG (the file name must match with the string you inserted into wp-config.php)
  6. Two files will be generated after save. bg_BG.po and bg_BG.mo
  7. Upload the .mo and .po files into wp-content/themes/your-theme/languages folder
Your WordPress installation should be in the language you intend on using the site.

4.1 How to activate the RTL Version

You just need to install the theme on RTL wordpress blog and it will adjust automatically .. check this page for more informations .

4.2 Important info, regarding translation in WordPress 4.1

  1. Go to (WordPress Dashboard > Settings > General)
  2. Select your website langauge as shown in this screenshot:

  3. Connect to your site -> open (wp-content/themes/Jannah/languages) directory
  4. Download the default.po file and open it with POEDIT.
  5. Translate file and save it as bg_BG for example, you must name this file with your language code, check the full list here
  6. Two files will be generated after save. bg_BG.po and bg_BG.mo
  7. Upload the .mo and .po files into (wp-content/themes/Jannah/languages) directory
  1. Go to (WordPress Dashboard > Appearance > Customize)
  2. Under "Static Front Page" you will have two options:
  3. "Your latest posts" use this option in case you want to show a list of your recent posts in a blog list view, note that you can choose many displying styles of the blog list style under (Jannah TiePanel > Archives Settings > Default layout settings)
  4. "A static page" we recommmend creating a new page called "Home" in WordPress, so you can assign this page as your static front page and you will be able to customize it using Page Builder, or chose any other page as your static front page.

TieLabs Theme Options is easy to access Options Panel, Organized in tabbed sections, Save options with Ajax. All Options functions are easy to understand, also some of options has a description to figure out what it will do on the front end. You don't have to navigate to each option which you want to config, just seach options by Search Bar that located at the upper right corner of Options Panel.

All options are not visible, some of theme based on it's parent option, if it's parent options is disabled, it will be hidden.

Jannah Theme Options

  1. General Options Manage general scpects such as Time format, Breadcrumbs Settings, Trim Text Settings, Post format icon on hover and Custom Codes. Quick View
  2. Layout Options Manage Site Width, Theme Layout and Loader Icon. Quick View
  3. Header Options Manage header layouts, Main/Secondary nav settings, Main/Secondary nav components, sticky nav. And your will be able to preview header options instantly by header preview area that located above of the header options. Quick View
  4. Logo Options Manage Logo Settings at normal and Retina screens. Quick View
  5. Footer Options Manage Instagram Footer Area, Footer Widgets layout, Copyright Area and Back to top button. Quick View
  6. Archives Options Manage Default Category/Tag/Author/Search pages layouts. Quick View
  7. Single Post Page Options Magane Default Posts Layout, Structure Data, Post General Settings, Post info Settings, Newsletter, Related Posts and Fly Check Also Box, Quick View
  8. Share Buttons Options Manage General Settings for Share Buttons, Above/Below Post share Buttons and Select & Share. Quick View
  9. Sidebars Options Manage Sidebars Settings, Default Sidebar Position, Add Custom Sidebar and Custom Sidebars. Quick View
  10. Lightbox Options Manage Lightbox Settings. Quick View
  11. Advertisments Options Manage Ad Blocker Detector, Background Image Ad, Header Ad, Above Footer Ad, Below the Header Ad, Above/Below Article Ad and Shortcodes Ads. Quick View
  12. Background Options Mangae Site Background Type and Background Overlay Settings. Quick View
  13. Styling Options Manage Genreal Styling Settings, Custom Body Classes, Theme Primary Color, Body Custom Style, Main/Secondary nav Custom Style, Header Custom Style, Main Content Styling, Footer/Copyright area Custom Style, Mobile Menu Custom Style and Custom CSS. Quick View
  14. Typography Settings Magage Body Font Family, Headings Font Family, Primary menu Font Family, Blockquote Font Family, Google Web Font Character sets, Font Sizes, Weights and Line Heights. Quick View
  15. Translations Options Magane Translations Settings. Quick View
  16. Social Network Options Magane Predefiend Social Networks and Custom Social Network. Quick View
  17. Mobile Options Manage Mobile Settings, Mobile Menu, Single Post Page at mobile, Mobile Elements and Sticky Mobile Share Buttons. Quick View
  18. AMP Options Manage Accelerated Mobile Pages Settings, Logo, Post Settings, Footer Settings, Advertisement and Styling. Quick View
  19. Web Notifications Options Manage Web Notifications by FoxPush and display the Notifications Statistics. Quick View
  20. Advanced Options Manage Post views settings, WordPress Login page Logo, Reset All Settings, Advanced Settings such as Cache, Minified CSS and JS files and Notify on theme updates. Quick View
  21. WooCommerce Options Manage WooCommerce Settings, WooCommerce Sidebar Position and WooCommerce Product Page Sidebar Position. Quick View
  22. bbpress Options Manage bbpress Sidebar Position. Quick View

Breadcrumb navigation is a term used to describe a hierarchical navigation menu presented as a trail of links. It is often used as a secondary navigation that allows users to go up and down in the hierarchy of links.

The purpose of breadcrumb navigation is to help users navigate around a website. It helps users understand where they are on a site. It also helps search engines understand the hierarchy of links on a web page.


How to enable the Breadcrumbs

Navigate to Jannah Settings page > General SettingsBreadcrumbs Settings Section


Jannah’s versatile and flexible footer can be customized in various ways. The footer option allows you to insert widgets, social icons, copyright text, shortcodes and more.

These are the theme options for the footer:

6.2.1 Footer Widgets layout

The main portion of the Jannah footer is a widgetized section that can display widgets in 1- 4 columns. Widgets add various content or features to your site. They can be added, removed, and rearranged in the  Appearance > Widgets tab on your WordPress admin panel.


6.2.2 How To Add Widgets To The Footer

  1. First, make sure that you’ve enabled footer widgets on your site. To do this, navigate to Jannah > Theme Settings > Footer and switch the First Footer Widgets Area option to On.
  2. Choose the Widgets area columns layout.
  3. If you want an extra widgets area with different layout, switch the Second Footer Widgets Area option to On
  4. Navigate to Appearance > Widgets to access the widgets and footer widget sections.
  5. You will see a First Footer - X Column section on the right-hand side for each footer column in the First Footer Widgets Area and Second Footer - X Column for each footer column in the Second Footer Widgets Area.
  6. On the left-hand side are your widgets, simply drag and drop the widgets you want from the left side into the Footer Widget sections on the right side.

6.2.3 Copyright area

This lower part of the footer can be used to accommodate simple footer content, such as a copyright text, custom text, menu, and/or social buttons.

These are the theme options for the Copyright area:

  • Centered Layout: Turn this option on to center all contents in the footer copyright area.

  • Social Icons:  Turn this option on to have the social icons in the footer copyright area.
  • Footer Menu: Turn this option on to have a menu in the footer copyright area. you can set this menu from Appearance > Menus.

  • Footer Text One and Two: Use these options to add custom text in the footer copyright area such as the copyright text, you can use these variables to add dynamic contents:
    %year% Replaced with the current year.
    %site% Replaced with The site's name.
    %url% Replaced with The site's URL.

6.2.4 Back to top button

This option allows you to specify if you want a scroll up button to appear after the page has been scrolled a certain amount.


6.2.5 Set Custom Styles and Background for the footer.

Check this


  1. Go to WP admin > Jannah > Theme options > Footer.
  2. Enable Enable/disable Instagram Footer Area.
  3. Media Source Display Instagram images by User Account or Hash Tag.
  4. Enter Username or the Hash Tag based on the above options step 3.
  5. Number of rows One or Two.
  6. Linke Media to Media file or Meida page on Instagram.
  7. Follow Us Button enable/disable follow us button.
  8. Follow Us Button Text & URL if the follow us button is enabled.

6.4 Structure Data

Structured data refers to kinds of data with a high level of organization, such as information in a relational database. When information is highly structured and predictable, search engines can more easily organize and display it in creative ways.

Check this article for more Information.

How to set up the Structure Data settings

  1. Navigate to Jannah > Theme Settings > General 
  2. Locate the Structure Data section.
  3. Turn the Enable option on. 
  4. Choose the Default Schema type for your articles.

7.1 Header Options

By TieLabs Header Builder you can build Unlimited Header Layouts. To config header settings go to Wp admin > Jannah > Theme Options > Header.


7.1.1 Header Builder Preview

By Header builder Preview Feature you can preview header settings instantly at the same place.


7.1.2 Header Layouts & Main Nav Settings

  1. Header Preview Area Each option you change, you will watch it's effect instantly in this area. From now, you don't have to go through back end and front end to see what the header options will do.
  2. Header Layouts There are three layout aspect, you can build unlimted layout from these layouts. Imagin three big structures and you can build unlimited layout based on each of these structures.
    • Layout #1 (default) Consist of three bars, top bar, logo&banner bar and main nav bar.

    • Layout #2 (Centered) Consist of three bars, top bar , center logo bar, center main-nav bar.

    • Layout #3 Consist of Two bars, top bar and logo&main-nav bar.

  3. Main Nav Settings Manage the main nav settings.
    1. Enable enable/disable the main nav.
    2. Dark Skin convert the main nav into dark skin.
    3. Boxed Layout change between boxed and wide layouts.
    4. Above the Header move the main nav above of the header instead of it's normal position.
  4. Mian Nav Components Manage the main nav components. Displayed when the Main Nav Settings is active.
    1. Search enable/disable search component.
      • Live Search enable/disable live search results.
      • Search Layout change between search bar and compact search button layouts.
      • Type To Search When you click on any character key on the keyboard, the search overlay box will appear. Based on comapct search layout.
    2. Slide Sidebar enable/disable slide sidebar button.
    3. Log in enable/disable log in button.
    4. Random Article button enable/disable random article button.
    5. Shopping Cart enable/disable shopping cart button.
    6. Buddypress Notifications enable/disable Buddypress Notifications button.
    7. Social Icons enable/disable social icons menu.
      1. Social Icons Layout change between:
        • Default all social icons beside each other in main nav.

        • Menu With Names.

        • Grid Menu.

  5. Stikcy Nav manage the sticky main nav.
    1. Enable enable/disable sticky main nav.
    2. Sticky Menu Behavior:
      • Default always stikcy main nav.
      • When the Scrolling upwards sticky the main nav just when the scrolling upwards.

7.1.3 Secondary Nav Settings

  1. Secondary Nav Settings
    1. Enable enable/disable the seconadary nav.
    2. Dark Skin convert the seconadary nav into dark skin.
    3. Boxed Layout change between boxed and wide layouts.
    4. Below the Header move the seconadary nav below of the header instead of it's normal position.
    5. Today's date display/hide Today's date.
      • Today's data formate manage today's formate.
  2. Secondary Nav Left/Right Areas

    Notes:

    1. The options below these areas based on what you'll select, if the compoentent in each area is active, the components settings displayed below and so on.

    2. The Breaking News is always displayed in the Left area in RTL Languages and in Right area in RTL Languages.

    3. You can't duplicate the same compenent in left and right areas.

  3. Secondary Nav Components as the main nav components.
  4. Breaking News
    1. Animations Effect Choose from six available animations:
      1. Typing
      2. Fading
      3. Sliding Left
      4. Sliding Right
      5. Sliding Up
      6. Sliding Down
    2. Show the scrolling arrows? show/hide breaking news arrows controls.
    3. Query Type Display news based on category/tag/custom text.


1. How to Upload a Default Logo

  1. Navigate to WP Dashboard > Jannah > Theme Settings > Logo 
  2. Set the Logo Settings option to Image.
  3. Locate the Logo Image option and click the Upload button to upload your logo image file.
  4. You can upload an optional default retina logo for retina ready devices using the Logo Image (Retina Version @2x) option.
  5. If you uploaded the logo images to the Media Library the theme will fill the standard logo image width and height automatically, if you want to use an external logo image you need to set the standard logo width and height manually.
  6. Set a custom top and bottom margin for the logo or leave these options empty to use the theme defaults.
  7. Click Save Changes

IMPORTANT NOTE

The retina default logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is  100px x 100px, the retina version of your logo must be 200px x 200px


2. How to Set a Custom Logo for a Category.

  1. Navigate to WP Dashboard > Posts > Categories
  2. Choose the Category you want to set a Custom Logo for it.
  3. Navigate to Logo from the Jannah - Category Options section
  4. Set the Logo Settings option to Image
  5. Locate the Logo Image option and click the Upload button to upload your logo image file.
  6. You can upload an optional default retina logo for retina ready devices using the Logo Image (Retina Version @2x) option.
  7. If you uploaded the logo images to the Media Library the theme will fill the standard logo image width and height automatically, if you want to use an external logo image you need to set the standard logo width and height manually.
  8. Set a custom top and bottom margin for the logo or leave these options empty to use the theme defaults.
  9. Click Save Changes

3. How to Set a Custom Logo for a post/page.

  1. In The Post's Add/Edit Page, Navigate to Logo from the Jannah - Settings section
  2. Enable the Custom Logo option.
  3. Set the Logo Settings option to Image.
  4. Locate the Logo Image option and click the Upload button to upload your logo image file.
  5. You can upload an optional default retina logo for retina ready devices using the Logo Image (Retina Version @2x) option.
  6. If you uploaded the logo images to the Media Library the theme will fill the standard logo image width and height automatically, if you want to use an external logo image you need to set the standard logo width and height manually.
  7. Set a custom top and bottom margin for the logo or leave these options empty to use the theme defaults.
  8. Click Save Changes

TieLabs Puilder, The most simple and Powerful page builder, at less 5min you'll be able to build your own home page with the minimal effort you'll imagine.

The builder enables you to add unlimited sections with unlimited blocks inside it also you can re-sort sections and blocks as you want.


8.1. The first Step

Click on the Use the TieLabs Builder button to convert the page from normal page to our builder. And then, you will be ready to add your new sections and blocks.


8.2. Add New Section

Click on + Add Section button to add your first new section. The section window will be appear as the following:


  1. Section Title: With this option, you can set a title to the section.
  2. Section Width: Select if the interior content is contained to site width or 100% width.
  3. Sidebar Settings: choose the section layout, without sidebar, right sidebar or left sidebar.
  4. Sticky Sidebar: check this if you want to put the sidebar of this section in Sticky Mode.

8.2.1 Section Title

  1. Section Title field, what you type will display the above of the section.
  2. Title URL set a URL to the section title, leave this field empty if none.
  3. Title Style: choose from the three available styles:
    • Default

    • Big

    • Centered



8.2.2 Section Background

  1. Background Color: set the section background color.
  2. Background Image: choose/upload image as a background image to this section
  3. Background Video: Youtube, Vimeo or local video url. The video URL will override the background image option.
  4. Parallax enable/disable the parallax effect on the background.
  5. Parallax effect: choose one of the availabel five effects, Scroll, Scall, Opacity, Scroll+Opacity or Scall+Opacity.

8.2.3 Section Styling

  1. Dark Skin: display all the blocks inside this section in the Dark Skin instead of the default light skin.
  2. Custom Class: set a custom class to this section, if you want more customization.
  3. Margin Top: if you want more space above of the section.
  4. Margin Bottom: if you want more space below of the section.

To close the window Click on Done button at the upper right corner.


You can Edit, Delete or Expaned/Collabse section.


8.3. Add New Block

After finishing the section sittings, the section body will display as in the above image and you will find the Add Block button inside it. Click on the Add Block button, the block window with appear as the following:

You can choose your blocks from a large variety of news blocks. Each block made with more concentrating on the conent of news websites so you mostly find that blocks will cover all your needs.


8.3.1 Block Options

  1. Block Title: the title that will display the above of the block.
  2. Block ULR: if you wnat a custsom URL to the block title.
  3. Categories: choose the news categories in this block.
  4. Tags: display news by tag instead of categories, this option will override the categories options.
  5. Sort Order: sort the news in the block by one of the available six values:
    • Recent Posts
    • Random Posts
    • Last Modified Posts
    • Most Commented Posts
    • Most Viewed Posts
    • Best Reviews
  6. Number of the posts to show
  7. Offset: Number of posts to pass over.
  8. Pagination: choose on of the available four paginations:
    • Numeric

    • Next and previous arrows

    • Show More

    • Load More


8.3.2 Block Advanced Options

  1. Show the content Only: display the block without border, padding and background.
  2. Ajax Filters: display categories/tags filters beside the block title.
  3. More Button: when you set a URL to title, you may want to display More button beside the title, check this if you want. Doesn't display if the URL field is empty.
  4. Color: block main color, title, links on hover, more buttons, loading icons and so on.
  5. Post title length: the number of words or characters, seach Jannah options panel for Trim Text by to choose trim by words or characters.
  6. Post Excerpt: show/hide the post excerpt.
  7. Post Excerpt Length: the number of words or characters, seach Jannah options panel for Trim Text by to choose trim by words or characters.
  8. Read More Button: show/hide read more button below of the excerpt.
  9. Dark Skin: display block in dark skin.
  10. Hide Thumbnails: show/hide all the thumbnails at the block.
  11. Post Meta: show/hide the post meta data (date, author, number of views and so on..)
  12. Media icon overlay: show/hide the media (video, audio and image) icons over the post thumbnails.

8.4. Re-sort sections and blocks

You can re-sort sections and blocks by drag&drop each of theme, and you can move one block from section to another section.


8.5. Manage Section Widgets

When the sectin has a layout with sidebar left or right, the sidebar area will display at the section body area, as the following:

Click on the Manage Widgets button, the Widgets window with display as the following:

You can drag&drop widgets to the Section Widgets Area.

If you want to choose one of the predefined sidebars, do the following:

  1. Check the Predefined Sidebar. After that, all the widgets will hide and the Choose Sidebar dropdown will appear
  2. Choose Sidebar choose of of the predefined sidebars.
You can add new sidebar from Jannah > Theme Options > Sidebars > Add Custom Sidebar.

8.6. Masonry Grid Below Of Blocks

You can display the Masonry Grid below of news blocks as following:

  1. Select the Masonry Page from template dropdown.
  2. After selecting the Masonry Page, it's options will be display, you can choose one of available three layouts and config other Masonry options.

8.7. Extended Header Background

Do the following steps:

  1. Set the background image to the first section.
  2. Select Styles from the Jannah-Settings panel below of builder.
  3. Check Extend the background of the first section to cover the header.

9.1 How To Setup A New Menu

Step 1 – Navigate to Appearance > Menus section of your admin sidebar.

Step 2 – Click the Create A New Menu link to make a new menu. Enter the name then click the Create Menu button

Step 3 – To add a menu item, select one of your created pages on the left-hand side and click the Add to Menu button. You can also add all kinds of different posts from the left side.

Step 4 – To add a custom menu item, enter a custom name and link into the Custom Links box.

Step 5 – Manage your menus by using the drag and drop functionality. To create a drop-down menu, simply drag a menu item below and slightly to the right of another menu item, and it will lock into place and create a dropdown section.

Step 6 – After setting up your menu, scroll down to the bottom of the page to assign the menu to one of the 4 locations in the Theme Locations box.

Step 7 – Once it's all done, make sure you click the Save button.


Jannah Offers 4 Different Menu Locations

  • Secondary Nav Menu – This is the top Secondary Menu.This menu does not support Mega Menus
  • Main Nav Menu – This is the Main Menu that shows in the Header area.
  • 404 Page Menu – This is the Menu that can be assigned to the 404 page. This menu does not support dropdown
  • Footer Navigation – This is the Menu that can be assigned to the Sticky Header. This menu does not support dropdown


9.3 How To Create A Mega Menu

Note: Only the Main Nav Menu supports this feature.

Jannah has a built-in mega menu that can be enabled on every First Level menu item in the Appearance > Menus tab. Please see below for information on how to set the mega menu up. If you need information on how to create a regular menu, please read our  Setting Up The Menu article here.


1. Multi Columns Mega Menu

  1. Navigate to Appearance > Menus section of your admin sidebar and select the ‘Create A New Menu’ link to create a new menu, or edit a current one.
  2. Only First Level items can enable the Mega Menu. Click the Arrow icon next to any First Level menu item to expand the Options box.
  3. Select Mega Menu Columns from the Enable The Mega Menu? select menu.
  4. From the Number of Mega Menu Columns select menu, choose the number of columns you want.
  5. Now, you need to add child menu items, which will represent columns in the mega menu. The first level of child items will represent Titles in each of 3 columns. Add 3 sub child menu items, like on the image below.
  6. Add child items to each of those columns. This will represent your actual sub-menu pages. Take a look at the image below.

  7. The menu dropdown should now look something like this:

    If you want to Remove the Titles (First Column, Second Column Third Column) Go to the Mega menu setting and check Hide Mega Menu headings? option.

    The menu dropdown should now look something like this:


2. Posts - 1st Post Highlighted Mega Menu

  1. Go to Appearance > Menu
  2. Add a Category from the left Categories panel.

  3. From the menu item's settings Select Posts - 1st Post Highlighted from the Enable The Mega Menu? select menu.

3. Mega Menu with Vertical Sub-Categories Filter

  1. Go to Appearance > Menu
  2. Add a  Category from the left Categories panel. You have to use a parent category if you want to have the sub-categories filter.

  3. From the menu item's settings Select Posts - Vertical Sub-Categories Filter from the Enable The Mega Menu? select menu.

4. Mega Menu with Horizontal Sub-Categories Filter

  1. Go to Appearance > Menu
  2. Add a  Category from the left Categories panel. You have to use a parent category if you want to have the sub-categories filter.

  3. From the menu item's settings Select Posts - Horizontal Sub-Categories Filter from the Enable The Mega Menu? select menu.

5. How to add a background image to a Mega Menu

You can easily add a background for a mega menu:
  1. Select the item you want to add a background for and click on the arrow icon in the top right-hand to expand the Options box.
  2. Paste in the image URL in the  Mega Menu Background Image input field.

  3. Set the background image position and the other settings as you want.


9.4 How to add an icon to menu

Note: Only the Main Nav Menu supports this Feature.
  1. Go to Appearance > Menus and select a menu that you want to edit.
  2. Select the item you want to add an icon to and click on the arrow icon in the top right-hand to expand the Options box.
  3. Click on the Menu Icon Option and choose the icon you want.

  4. If you want to add only an icon in menu (without text) check the Show the icon only? checkbox.


9.5 How to add a Colored Label to a menu

Note: Only the Main Nav Menu supports this Feature.

You can easily add a colored label to a main or sub-menu item:

  1. Go to Appearance > Menus and select a menu that you want to edit.
  2. Select the item you want to add a colored label and click on the arrow icon in the top right-hand to expand the Options box.
  3. Add your text in the label text field.
  4. Choose the background color for the label.


9.6 How to add custom menu for a post/page

Sometimes more than one menu at the main menu location is needed for a complex site. The menu you want to use on almost all pages of your site can be setup simply like it is shown in  this tutorial. Assign it to the main menu location, and you are done. The second menu, which was specially created for the one-page site part, is not assigned to a special location in the menu setting. In order to assign it to your special page, follow these two steps:

  1. Open your page’s edit screen. If you have not created it so far, navigate to the Pages section of your admin, and click the Add New option.
  2.  Scroll down to find the Jannah - Post Options box, and find the Main Menu tab and choose your newly created menu for this page


You can easily create non-clickable menu links to any WordPress menu by simply adding a # symbol for the “URL” when inserting a custom link. However, when a user clicks it a # symbol will be added to the URL.


  1. Navigate to Appearance > Menus section of your admin sidebar.
  2. Locate the Screen Options tab in the top right corner.
  3. Enable the Link Target option.

  4. Check the Open link in a new window/tab option on your menu item.

Custom Sliders allow you to add slides with custom image , title , caption and link .. so you can use it as a main slider on the homepage or on a single post/page.

  1. Navigate to Custom Sliders > Add New .
  2. Add a title for the slider
  3. use Add New Slide button to add a new slide
  4. Choose the slide image from your existing images in the media library or upload a new one and click Use this image button
  5. Enter your slide title , link and caption
  6. use Add New Slide button again to add new slides
  7. Once its all done, make sure you click the Publish / Update button.

Setting Custom Slider:

1- Block with Custom Slider

When you create your page by Tielabs Page Builder, after creating section and inserting a block inside it, open the block options window:

  1. Choose any slider block.
  2. The custom slider dropdown will appear with any slider block.

2- Post with Custom Slider

In post edit page, Open Jannah - Settings block:

  1. Select General Tab.
  2. Select Slider post formate.
  3. Choose Custom Slider from custom sliders dropdown.

  1. From the Taqyeem - Review options box in the post edit page .
  2. Choose the Review Box Position
  3. Choose the Review Style
  4. Type your Review Title, Summary and Text appears under the total score.
  5. Enable Add Button to check button settings.
  6. Use Add New Review Criteria button to add a new Review Criteria
  7. Enter the Review Criteria title and score
  8. Use Add New Review Criteria again to add new Review Criterias
  9. Once its all done, make sure you click the Publish / Update button.

In post edit page , From Jannah - Settings Block:

  1. Select Layout Tab.
  2. Select Full-Width Page Layout.
  1. Copy the code given to you by Google Analytics
  2. Go to WordPress admin > Jannah > Theme Options Search settings for Header Code.
  3. Paste your Google Analytics (or other) tracking code here. This code will automatically be inserted into the head of your theme on every page.
  4. Click Save Changes. That's it!
  • Navigate to Appearance menu > Widgets page.
  • Add Arqam Lite - Social Counter widget to the sidebar you want.
  • You can change the social icons style between Gray Icons, Colored Icons, Colored Border Icons from the widget settings.
  • To access Arqam Lite API settings, please check Arqam Lite menu item in the left WordPress Menu Bar, and adjust settings as following:

Facebook

Getting Your Facebook page Name/ID ?

If Your page Link is something like http://www.facebook.com/tielabs the page name will be tielabs

If Your page Link is something like http://www.facebook.com/pages/Anasheed/153555808028282 the page ID will be 153555808028282

Register a new App :

  • Go To FaceBook Developers page.
  • From Apps Select Create a New App.
  • Enter Display Name and choose a category for the App
  • Enter the Captcha .
  • Click on Show button to display the App Secret.
  • Back to the Arqam Lite Settings page and Click on Get Access Token link in the end of the Facebook Box.
  • Enter the App ID and App Secret in the Facebook App info box and click Submit .
  • It will redirect you back to the Arqam Lite Settings page .. now the Access Token Key containing a code.

Twitter

  • Login to Twitter, and go to: https://dev.twitter.com/apps
  • Create new application
  • Fill in the form fields and create your app
  • After you're done, you'll need to put the Consumer key and the Consumer secret to Arqam at WP Admin > Arqam Lite > Twitter box

YouTube

Your Youtube Channel URL will be something like http://www.youtube.com/user/username or http://www.youtube.com/channel/channel-name

You should enter Your YouTube username or Channel ID and choose User or Channel from Type menu.

How can I get my YouTube API Key?

  • Create a project/app in https://console.developers.google.com/project
  • Inside your project go to APIs & auth > APIs and turn on the YouTube Data API
  • Go to APIs & auth > APIs > Credentials > Public API access and click in the CREATE A NEW KEY button.
  • Select the Browser key option and click on the CREATE button
  • After you're done, Copy your API key and paste it in Youtube Api Key field in Youtube box at WordPress Admin > Arqam Lite

SoundCloud

  • Go To Your Applications page .
  • Click On Register a new application Button .
  • Enter Your App Name and click on Register .
  • Check Yes, I have read and accepted the Developer Policies and Click on Save App Button
  • After you're done, Copy the Client ID and paste it in API Key field in SoundCloud box at WordPress Admin > Arqam Lite.

Behance

  • Go To Manage Your Applications page .
  • Click On Register a new App Button .
  • Enter Your App Name, Your Blog URL and Description
  • Then click on Register Your App.
  • After you're done, Copy the API KEY / CLIENT ID and paste it in API Key field in Behance box at WordPress Admin > Arqam Lite.

Dribbble

  • Go To Dribbble Register Application page .
  • Fill in the form fields and create your app
  • After you're done, copy the Client Access Token and paste it in the Access Token Key field > Arqam Lite > Dribbble box

RSS

Getting Your Feedpress Json file URL

  • Login to feedpress.it .
  • Go to your Feeds page .
  • Click on Admin button in your feed box .
  • In the feed page choose JSON file from the Miscellaneous :
  • Copy the JSON file link and paste it in "Feedpress Json file URL" input field in the RSS Box .

Instagram

  1. Make sure you are logged into Instagram.com and then visit http://instagram.com/developer.
  2. Click on the Manage Clients, as shown below.

    If this is the first time you are adding an app or plugin, Instagram will ask you a few questions. You can enter these responses, click "Sign Up", and then click "Manage Clients" again:

    Your website:
    Enter your website url
    Phone number:
    Enter your phone number
    What do you want to build with the API?
    A plugin for my WordPress website.

  3. Register your WordPress site by click the "Register a New Client" button.

  4. Fill in the "Register new OAuth Client" form with the following infomation and click "Register":

    Application name
    Enter the name of your WordPress website
    Description
    Instagram App for Arqam WordPress plugin
    Website
    Enter your website url
    OAuth redirect_url ( Change Your-Blog-URL with your WordPress Blog URL )
    Your-Blog-URL/wp-admin/admin.php?page=arqam_lite&service=arq-Instagram

  5. - Copy the Client ID and Client Secret .

    - Go to Arqam Lite options page and click on Get Access Token button.

    - Fill the Instagram App info form and click on Submit button.

    - It will redirect you to Instagram Authorization Request page .. Enter your Email and password and click on Authorize button.

    - It will redirect you back to the Arqam Lite Settings page.

Adding a Lightbox Content

  1. Go to Posts --> Add New
  2. On the Visual editor mode .. click on TieLabs shortcodes icon and choose "Lightbox".

  3. In the Add Lighbox window Add:

    • The Full Image or Youtube / Vimeo Video URL which that will appears in the lighbox .
    • The Title which will shown as a tooltip text when the mouse moves over the element .
    • In "Content" area add the Text will linked with the Lightbox .. or the html code if you want to use an image like :
      <img alt="" src=" IMAGE URL " />
  4. Then click on OK button.
Don't foreget to check "Lightbox Settings" under Jannah > Theme Optinos > Lightbox.


16.1 How to setup the Twitter widget

  1. Go to the Appearance > Widgets in your admin section.
  2. Find the Jannah - Twitter widget and drag it to a sidebar or footer column of your choice.
  3. ِEnter the Twitter Username.
  4. Enter your Twitter App Consumer and Secret keys. Check this tutorial for how to get these keys
  5. Set the Number of Tweets.
  6. Enable the Slider Layout? option to use this layout:

  7. Make sure you click Save, then you’re all done!

16.2 How to setup the YouTube widget

  1. Go to the Appearance > Widgets in your admin section.
  2. Find the Jannah - YouTube widget and drag it to a sidebar or footer column of your choice.
  3. ِEnter the Channel Name or the User ID.
  4. To get your Channel Name or your User ID Make sure you are logged in with the YouTube account of your channel, then go to your account advanced page.
  5. Make sure you click Save, then you’re all done!

16.3 How to setup the Flickr widget

  1. Go to the Appearance > Widgets in your admin section.
  2. Find the Jannah - Flickr widget and drag it to a sidebar or footer column of your choice.
  3. Click on Find your ID at idGettr link, http://idgettr.com .
  4. Enter your username in place of username in the field and click Find and it will generate your ID.
  5. Copy and paste the new ID into the corresponding field of the Flickr widget in the admin section.
  6. Make sure you click Save, then you’re all done!

16.4 How to setup the Weather widget

  1. Go to the Appearance > Widgets in your admin section.
  2. Find the Jannah - Weather widget and drag it to a sidebar or footer column of your choice.
  3. ِEnter the Location: To find your location use the following link. You can use “city name” or “city name, country code” (ex: London, UK).
  4. Choose the Unit: Celsius or Fahrenheit.
  5. Enter your API key, to get it:
    1. Login to your OpenWeatherMap account, or create an account if you don't have one.
    2. Navigate to the API keys page.
    3. Copy the API key, or create a new one if you don't have one yet.
  6. Choose the number of Forecast days.
  7. If you want you can set a custom name for the location in your language.
  8. Use the custom text and background color options to change the look of the widget.

  9. Make sure you click Save, then you’re all done!

17.1 WooCommerce - Installing

Check this tutorial for how Installing and Uninstalling WooCommerce

Or check this video:



17.2 Configuring WooCommerce Settings

Check this tutorial for how to configuring WooCommerce settings


18.1 Font Awesome (or other font) Icons Not Working

These are some troubleshooting steps if icon fonts (social icons, menu search icon, back to top button icon, etc.) aren’t loading on your site (show’s a square instead).

Some browsers refuse to embed some fonts,This problem can be seen in the browser console:

Font from origin 'http://cdn.example.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.<br>
This should solve your problem, just copy paste it into your .htaccess file en re-upload it, clear your cache and eventually also clear your CDN files and the problem is solved:
# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------


SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS


# ———————————————————————-
# Webfont access
# ———————————————————————-
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like “subdomain.example.com”.


Header set Access-Control-Allow-Origin “*”
Check the following links for more info:

Are you/your customers using Adblock Plus?

If “ Remove Social Media Buttons” option is enabled, you will miss some brand icons.


18.2 How to Clear Cache

Sometimes where you encounter a problem with your website, such as not seeing changes you have made in the front end of your site, it could simply be that you need to clear cache. There are 3 different cache systems in the WordPress ecosystem which we will talk about in detail.

1- Clear Browser Cache

Nearly all modern day browsers have an internal caching system which they use to reduce the amount of loading assets of the website (using previously downloaded ones instead from the local machine). This is a great system to improve the performance of the website loading, but may cause problems when you want to see some changes you have made during the development phase or upon changing the website. Each browser has a different process to follow when clearing cache. Detailed information on each browser is mentioned below:

  1. Google Chrome
  2. Mozilla Firefox
  3. Apple Safari
  4. Internet Explorer
  5. Opera
  6. Android
  7. IOS
  8. Windows Phone

2- Clear Plugin Cache

Using WordPress plugins to enable cache is a common practice among the community. It is not recommended to use such plugins during the development phase, but it is recommended to use them in production. In some cases theme updates or applying changes cause problems when we use cache plugins, so it is essential to clear cache in such cases. Clearing cache is different depending on which plugin you use. You need to check the plugin documentation on how to clear cache, but we list some popular cases here:

WP Super Cache
  1. Go to WordPress Admin Menu > Settings > WP Super Cache.
  2. Click on the Delete Cache button under Delete Cached Pages section.
W3 Total Cache
  1. Locate the Performance link at the top section of the WordPress admin page.
  2. Click on the “Empty All Caches” link

3- Clear Server Cache

In some cases, hosting service providers apply internal caching to improve the performance of the server. This happens especially in WordPress managed hosting service providers. You will need to contact your hosting service provider, or check their documentation to clear server cache. Here is a list of popular servers that use this cache system. Click on the link to know how to clear server cache on those cases:

  1. SiteGround
  2. WP Engine
  3. Blue Host
  4. GoDaddy

4- Clear 3rd Party Cache

The cache conflicts happen in some cases that 3rd party Content Delivery Networks or cache systems are used. For example MaxCDN or CloudFlare or Varnish Cache can be considered as popular choices. Clearing those functionalities or disabling them temporarily is a good practice for troubleshooting.

5- Clear Jannah Theme Cache

Jannah has a cool feature to cache some assets to increase the performance of the theme. You will need to clear cache after you update the theme or make changes on the theme files. To clear the cache you simply need to click on the Save Settings button in the theme options page.


19.1 How to activate the RTL version of the theme

WordPress detects whether your chosen language is an RTL language then the rtl.css stylesheet is loaded automatically and your website will be displayed in RTL. to change your WordPress setup language:

  1. Navigate to Settings > General in your WordPress dashboard.
  2. Select the preferred RTL Site language such as the Arabic.
  3. Make sure you click Save, then you’re all done!

Keeping the English WordPress Admin Area

 If you want to use the RTL version of the theme and keep the dashboard in English. you need to do is install and activate the English WordPress Admin plugin. Upon activation, the plugin will add a language switcher in the WordPress admin bar.


19.2 How to Translate the theme

Within this section, you’ll find everything you need to localize and internationalize the Jannah theme into your language. You can translate the theme in many different ways:

1. Using Jannah's built-in translation panel

Jannah lets you translate all the strings which are present on the front end of your website via the built-in translation panel in the theme settings page.

  1. Go to Jannah > Theme Settings > Translations.
  2. Add the translation for each element or just for the desired elements.
  3. Make sure you click Save Changes button, then you’re all done!

2. Using The Loco Translate plugin

The  Loco Translate plugin provides in-browser editing of PO files used to localize WordPress plugins and themes. check this tutorial for how to translate the theme via Loco Translate 


3. Using PoEdit

The translation file Jannah.pot is in the Languages Files folder in the theme folder. Edit the .po file using POEdit, and use the translation field to make replacements.  

From the file menu, save the file with your language name e.g de_DE.po. It will generate both a .po and .mo files for your translation. Place these files into the languages folder /wp-content/themes/jannah/languages.
Check this tutorial for more information.

4. Using the WPML Plugin

Since Jannah is WPML compatible theme, you can translate a template to a language of your choice. You will need to purchase a recent version of  WPML, including the String Translation and Translation Management modules.
Follow the  Getting Started Guide after installing the core WPML plugins.

To initiate translation, go to  WPML > Theme and Plugin Localization. Click on Scan the theme for strings. You will see the theme strings and which ones are translated. Then select WPML > String translation and a list of the strings in the theme will be available. Choose the string you need to translate and select the translation link to add translations to languages.


19.3. How to change the number of WordPress posts displayed on your blog page

  1. Login to your WordPress dashboard.
  2. Go to the SettingsReading in your admin section.
  3. Change the Blog pages show at most number from 10 to anything else that you like.


19.4. How to get Twitter Consumer and Secret Key

To create a Twitter application, you need to login to the Twitter developer dashboard using your Twitter account. The point of creating an application is to give yourself (and Twitter) a set of keys. 

Follow the steps below to create a Twitter application and to generate the keys.

  • Login to Twitter developer account using your Twitter account.
  • Navigate to the Application Management console.
  • Click on the Create New App button to initiate the Twitter application creation.
  • Fill the form and click the submit button to create the application.

  • Navigate to the API Keys tab to get your Consumer and Secret Keys.


19.5. How To Disable Comments in WordPress

Comments can be disabled on any page or post when it is being edited. This can be done by clicking on screen options at the top right of your screen when editing a page or post, and ticking the discussion box if it is not enabled already.

Once enabled, you can scroll down to the discussion panel under the text editor and untick the allow comments box.

Disabling Comments on Multiple WordPress Posts or Pages

  1. Click on Posts in the admin sidebar and under posts, select All Posts. For Pages, click on Pages > All Pages.
  2. Tick the posts you would like to disable comments for.
  3. Select Edit from the Bulk Actions at the top of the screen and click the Apply button.
  4. Under Comments, select Do not allow and Click the Update button.

Disable WordPress Comments by Default

You can also disable comments totally on all future posts. Go to  Settings > Discussion and untick “Allow people to post comments on new articles”.

How To Completely Disable WordPress Comments

You can also disable WordPress comments globally, on posts and pages by simply using a plugin. An example of such a plugin is  Disable Comments.


19.6. How to change my avatar

The theme uses  Gravatar to display users avatars . to create or change your Gravatar :

If you have never setup a Gravatar account:

  1. Register / login to Gravatar. Upon registering, use the SAME email address that is associated with your WordPress User Profile.
  2. Upload your photo and associate it with that specific email address.

If you already registered at gravatar.com, follow these steps:

  1. Click on “My Gravatars” .
  2. click on “Add a New Email” .
  3. Then, you’ll need to click on “Add a New Image” .
  4. Upload an image.
  5. Then select the email address, and then select your image from bottom. Now it’s associated with that email address. Click Save .
  6. It will take about 5-10 minutes to propagate on the internet, and then will appear on site.

Note: In case you need to assign custom image for your authors, check this plugin.


19.7. How to paginate a post

In order to paginate your blog post, in the Write panel in your WordPress admin, switch to the TEXT view (if you are using the Visual view) and then enter the following code to wherever you want to break the post up into a new page:

<!--nextpage-->

20.1. Enable gzip compression

All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages.

To enable gzip compression add the following lines to your .htaccess file:

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

20.2. Leverage Browser Caching

When a web browser displays your webpage it has to load several things like your logo, your CSS file, and other resources. What browser caching does is “remember” the resources that the browser has already loaded. When a visitor goes to another page on your website your logo or CSS file does not need to be loaded again, because the browser has them “remembered”. The end result is that your pages load much faster.

To enable browser caching add the following lines to your .htaccess file:
## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

## EXPIRES CACHING ##<br>

20.3. Minify HTML,CSS and JavaScript

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser – e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on

To Enable Minify use the following plugins :

20.4. Optimize Images

Optimizing your images will helps your WordPress site load faster.

Download and activate  WP Smush.it This plugin will optimize every image you upload and you can use the Bulk Smush.it feature to smush all of your uploaded images.

Alternatives to WP Smush.it include  EWWW Image OptimizerCW Image OptimizerImsanity andHammy. Many WordPress users prefer using these plugins as they do not rely on an external server to process your images.