Sahifa - WordPress Magazine / Newspaper Theme

Uploading Sahifa via FTP to WordPress

• Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer.
• In the extracted folder you will find 'sahifa.zip' Extract this file .
• Using an FTP client to access your host web server.
• Upload the Theme files in the extracted folder called 'sahifa' to (/wp-content/themes/) directory provided by WordPress.
• Visit WordPress Dashboard > Appearance > Themes, then click the Activate on Sahifa theme.

Installing Sahifa From the WordPress Dashboard

• Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer.
• Log into your WordPress admin panel and click on the “Appearance” tab.
• Now click on the "Add New" tab.
• Click on the "Upload Theme" button, "Browse" for file called sahifa.zip in the extracted folder select "Open".
• Click the "Install Now" button.
• Activate the theme from this page, OR "Return to Themes Page" and activate from there.

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.

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.

Updating Manually

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

Automatic Demo Site Data Importer

Importing demo data (post, pages, images, theme settings, ...) is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch.

• Go to Dashboard > Sahifa > Import Demo Data
• Click on "Import Demo Data" button .

Manually By uploading XML file

• Go to Dashboard > Tools > Import > WordPress
• Install the plugin.
• Use it to upload the sample content XML file .

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

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 .

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/sahifa/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/sahifa/languages) directory

Also, Sahifa 5 has a custom string translation inside TiePanel, check (Sahifa TiePanel > Translation)

This Theme uses wordpress built-in menus feature which can be found in your wordpress dashboard > appearance > menus. To setup a new menu, please follow the steps below. Its best to already have your pages created, even if they are blank pages.

1. Navigate to Apperance > Menus page
2. Click the "create a new menu" link to make a new menu. Enter the name then hit Create Menu
3. To add a menu item, you can easily select one of your already made pages on the left hand side and click Add to Menu
4. You can also add menu items by entering a custom name and custom link into the Links box.
5. You can manage your menus using the drag and drop functionality. To create a dropdown 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.
6. After setting up your menu, select the menu you just created as the Primary Navigation in the Menu Settings and Create a new menu and select it as the Top Menu Navigation in the Menu Settings
7. Once its all done, make sure you click the Save button.
8. You can chnage menus locations in any time from Manage Locations tab .
9. You can show more boxes like "Posts", "Product Categories" and "Tags" by clicking on "Screen Options".

Add House Icon To main Navigation

1. Go to Appearance > Menus
2. In the Links box add your full blog url in the URL input field .. don't forget http://
3. Add any text in the Label input field .. for example add 'Home'
4. Click on Add To Menu Button
5. Click Save Menu

How to remove the house icon ?

add this code to custom css area in Tiepanel > Styling

header#theme-header #main-nav ul li.menu-item-home a , header#theme-header #main-nav ul li.menu-item-home.current-menu-item a{
    background-image: none !important;
    text-indent: 0;
    width:auto;
}

Mega Menus

• Now, Mega menu works on Categpry pages, Links, Products, Posts, Pages etc...
• Check Mega Menu settings illustrated in the screenshot above.
• You have 3 options in the dropdown list:
1. Sub Categories + Posts



And in case your category doesn't have sub-categories, then this option will get the latest 4 posts in this category.



2. Recent Posts + Check also, with an option to add sub-menu items too.



3. Mega Links, with an option to change number of columns.



Note: to create a mega menu links like this one in the screenshot above, you will need to choose the three columns layout, with three main sub-items, and adding sublings inside these three menu sub-itmes, just like this screenshot:

1. Navigate to Sahifa Settings page > Header Settings tab .
2. From the Logo box set Logo Setting option to Custom Image Logo .
3. Click Upload and Select your logo image to upload.
4. Once uploaded click "Use this image" .
5. Make sure you’ve selected "Full image" for the image size.
6. Also you can upload a logo for the Retina devices . It should be 2x the size of main logo.

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 (Sahifa 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.

1. In your page editor, make sure that "Page Builder" button is enabled.
2. From the Page Builder box you can add the boxes you want to appear in the homepage also you can re-sort the boxes.
3. Each box has its own settings, but some boxes must be added underneath each ohter like in "Category Block | Layout 3".
4. From the Blocks Settings box you can set the First News Excerpt Length in the news boxes and the posts meta info that appears below posts titles.

Grid Settings

1. Check Enable under the Grid Featured Posts Settings
2. Set animation, slideshow speed etc as you want .
3. Choose the Query Type to get WordPress posts:
   • To display Posts from Category, set Query type as Category then select a category in the dropdown menu
   • To display Posts by tag, set Query type as Tag then Enter a tag name, or names seprated by comma in the tags input field .
   • To display Selective Posts , set Query type as Selective Posts then Enter a post ID, or IDs seprated by comma in the Selctive Posts IDs input field .
   • To display Selective Pages , set Query type as Selective Pages then Enter a page ID, or IDs seprated by comma in the Selctive pages IDs input field .
   Note: to know how to get your post/page ID in WordPress, please check this tutorial.
   • Or set Query type as "Custom Slider" and choose the slider from the dropdown menu list .

Slider Settings

1. Check Enable under the Slider Settings
2. Choose Slider Type Flexi Slider or Elastic Slideshow .
3. Set animation , slider speed etc as you want .
4. Choose the Query Type to get WordPress posts:
   • To display Posts from Category, set Query type as Category then select a category in the dropdown menu
   • To display Posts by tag, set Query type as Tag then Enter a tag name, or names seprated by comma in the tags input field .
   • To display Selective Posts , set Query type as Selective Posts then Enter a post ID, or IDs seprated by comma in the Selctive Posts IDs input field .
   • To display Selective Pages , set Query type as Selective Pages then Enter a page ID, or IDs seprated by comma in the Selctive pages IDs input field .
   Note: to know how to get your post/page ID in WordPress, please check this tutorial.
   • Or set Query type as "Custom Slider" and choose the slider from the dropdown menu list .

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 for Posts.

From the Post Head Options box in the post edit page .

1. set the Display option to Slider .
2. Choose the Slider you want from the Custom Slider dropdown menu .

The Sidebar Manager enables you to create a unique sidebar for specific posts, pages, archives and categories .

1. Navigate to Sahifa Settings page > Sidebars tab .
2. From the Sidebar Position box set the default sidebar position .
3. From the Sticky Sidebar box you can adjust sticky settings for sidebars.
4. From the Add Sidebar box type your sidebar name and click Add button.
5. From the Custom Sidebars box assign your Custom sidebar to Home , posts , pages or archives .

Set Custom Sidebar for posts/pages .

From post edit page , Select your custom sidebar from the Sidebar Options box As shown in below screenshot

All of your posts must have a featured images .. these images will appears in the slider , homepage news boxes , sidebar .. etc

How to set a featured image for a post :

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 , Select full Width image from Sidebar Options As shown in below screenshot.

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-->

You can also add a Content SlideShow in your post using Shortcodes, check this screenshot:

A Page Template is a template which comes with your theme. WordPress can be configured to use different Page Templates for different Pages. You can select which Template will be used when displaying a particular Page. For Example : Authors , Timeline , Sitemap and Tags page templates

How To Use a Page Template

1. Go to Pages --> Add New
2. On the right-hand side, you will see the following panel titled Page Attributes with a drop-down under Template:
   If you do NOT see this panel, look to the top right of your screen for the words - Screen Options. Click that and enable the checkbox next to Page Attributes.
3. Select the Page Template you desire.
   

   

4. Publish the Page. That's it! Now that page will display the pre-defined content within that page template.

Authors List Page Template

When you Choose Authors List page template . the Authors template Options box will appears in the left main area which allows you to choose the User Roles .

Best Reviews Page Template

When you Choose Best Reviews page template . the Categories box will appears in the left main area which allows you to choose the Categories and set the numboer of posts .

Blog List Page Template

When you Choose Blog List page template . the Categories box will appears in the left main area which allows you to choose the Categories

Masonry Page Template

When you Choose Masonry Layout page template . the Categories box will appears in the left main area which allows you to choose the Categories

Media Page Template

When you Choose Media page template . the Categories box will appears in the left main area which allows you to choose the Categories

1. Copy the code given to you by Google Analytics
2. Go to WordPress > Sahifa TiePanel > General Settings > look towards the bottom for Header Code box.
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!

The theme uses Gravatar to display users avatars . to craete 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.

Add an image Advertisement

• Go to Sahifa TiePanel page > "Ads Settings" tab
• Enable the Ads area you want via "ON/OFF" button.
• Click on "upload" and add your Ad image.
• Add your Ad link.
• Add Alternative Text For The image (optional).
• Enable "Open The Link In a new Tab" option If you want to open the link in a new window / tab.

Add a Text , Custom Ad or Flash Advertisement

• Go to Theme Panel page > "Ads Settings" tab
• Enable the Ads area you want via "ON/OFF" button.
• Add your Ad code or custom html code in the "Custom Ad Code" input area .

Flash (SWF) Advertisement Code

A flash advertisement would need to be in the .swf (shockwave) format. To use it, just replace the data & value URL paths and width/height accordingly in the code example below:

<object type="application/x-shockwave-flash data="http://www.URLPath.com/Path/To/file.swf" width="300" height="250">
		<param name="movie" value="http://www.URLPath.com/Path/To/file.swf" />
</object>

One of great features of Sahifa is that you can make an online shop with it.

Sahifa is fully compatible with latest version of Woocommerce Plugin. We added required stylings to fit the design, and all required confiq codes to make it seamless with Sahifa. If you dont need Woocommerce simply dont install it and all the features, codes and anything required for woocommerce will not be loaded and interfered. Vice versa, if you need to set up woocommerce just install woocommerce like you do for other plugins and thats all about it. you dont need to do anything else.

Woocommerce Documentation

One of great features of Sahifa is that you can Customize your categories as you want with custom layout, sidebar, slider, logo, background, color and logo.

• Navigate to Posts menu > Categories .
• Edit the category you want .
• From the Edit category page you can chnage the settings of your category as following :

Sahifa - Category Settings

1. Change Category Layout
2. Choose Custom Sidebar for the category.
3. Choose Recent Posts or Random Posts Slider for the category.

Sahifa - Category Logo Box

From this box you can set a custom logo for the category.

Sahifa - Category Style Box

From this box you can set a custom Color and Background for the category.

• 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.

Adding a Lightbox Gallery

• Install Infinite-Scroll Plugin .
• Go to Settings Menu > Infinite Scroll.
  • Enter .post-listing in the "Content Selector" input field .
  • Enter .pagination in the "Navigation Selector" input field .
  • Enter #tie-next-page a in the "Next Selector" input field .
  • Enter .item-list in the "Item Selector" input field .
• Click on Save Options Button .

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

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 ##

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 follwing plugins :

• WP-HTML-Compression ( For HTML )
• Better WordPress Minify ( For CSS and JS )

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 Optimizer, CW Image Optimizer, Imsanity and Hammy. Many WordPress users prefer using these plugins as they do not rely on an external server to process your images.