Jizan 2.1 Documentation

1.Getting started

Thank you for choosing Jizan. This guide walks you from an empty WordPress site to a finished news magazine. Read sections 1 and 2 first; everything after that can be read in any order. Use the search box on the left to jump to any setting.

What is in the download

Requirements

You can check your server values on Jizan → Welcome (box "System status") after installation. If a value is too low, ask your host to raise it, or add define( 'WP_MEMORY_LIMIT', '256M' ); to wp-config.php above the line "That's all, stop editing!".

Install the theme

1. Log in to your WordPress admin and go to Appearance → Themes.
2. Click Add New Theme at the top, then Upload Theme.
3. Click Choose File, select jizan.zip and click Install Now.
4. When the upload finishes, click Activate.
5. WordPress opens Jizan → Welcome once Jizan Core is active. Until then a notice at the top asks you to install the required plugins (next step).

Install the required plugins (TGMPA)

Jizan uses a plugin installer (TGM Plugin Activation). After activating the theme you see a notice "This theme requires the following plugins: Elementor and Jizan Core".

1. Click Begin installing plugins in the notice, or go to Appearance → Install Plugins.
2. Tick Elementor, Jizan Core and (recommended) Contact Form 7.
3. Choose Install in the "Bulk actions" menu and click Apply. Wait until all three are installed.
4. Go back to Appearance → Install Plugins, tick the installed plugins again, choose Activate and click Apply.

Without Jizan Core the theme still works (Theme Options move to Appearance → Jizan Options), but widgets, ads, reviews and AJAX features are missing, so always keep it active.

Child theme

Use a child theme if you plan to edit theme files (PHP templates or CSS). Your Theme Options, menus and widgets are stored in the database, so they stay when you switch to a child theme (re-assign menu locations and widgets once if WordPress asks).

1. On your computer create a folder named jizan-child.
2. Inside it create style.css with this content:

   /*
   Theme Name:  Jizan Child
   Template:    jizan
   Version:     1.0.0
   Text Domain: jizan-child
   */

3. Create functions.php next to it:

   <?php
   add_action( 'wp_enqueue_scripts', function () {
   	wp_enqueue_style( 'jizan-child', get_stylesheet_uri(), array(), '1.0.0' );
   }, 200 );

4. Zip the folder (jizan-child.zip), upload it in Appearance → Themes → Add New Theme → Upload Theme and activate it. Jizan (the parent) must stay installed.
5. To change a template, copy the file from jizan/ to the same path in jizan-child/ and edit the copy.

License and updates

• Your ThemeForest purchase includes future updates. Download new versions from your ThemeForest account (Downloads → Jizan → Download → Installable WordPress file only).
• For automatic update notices inside WordPress, install the free Envato Market plugin and connect it with a personal token from your Envato account.
• Jizan Core is updated together with the theme: after a theme update a notice says "The following plugin needs to be updated: Jizan Core". Click Begin updating plugin.
• Support is included for the support period of your purchase (see Support).

Updating from 2.0 to 2.1

1. Back up your site (files and database) with your host's backup tool or a backup plugin.
2. Download the 2.1 jizan.zip. Go to Appearance → Themes → Add New Theme → Upload Theme, upload it and click Replace current with uploaded.
3. Update Jizan Core: click Begin updating plugin in the notice (or Appearance → Install Plugins → tick Jizan Core → Update). You can also upload jizan-core.zip in Plugins → Add New Plugin → Upload Plugin and choose Replace current with uploaded.
4. Clear every cache: your cache plugin, your host/CDN cache, and Elementor → Tools → Regenerate CSS & Data.
5. Open your site. Your content, menus, widgets and Theme Options are kept. Some 2.1 features change the default look; switch them back if you prefer the 2.0 design:

   2.1 default	How to get the 2.0 look
   New navigation bar ("Solid")	Jizan → Theme Options → Header → Navigation Bar Style = Borders (classic 2.0)
   Premium footer	Theme Options → Footer → Footer Design = Classic (2.0)
   Premium off-canvas panel	Theme Options → Header → Premium Off-canvas Panel = Off
   Archives use "Load more"	Theme Options → AJAX & Loading → Archive Pagination = Page links - Older / Newer (1.x/2.0)
   Category colours on labels	Theme Options → Layout & Breadcrumbs → Category Colours = Off
   Dark mode switch in the header	Theme Options → Reading → Dark Mode = Off

6. Optional: to get the 23 new homepages, run Jizan → Demo Import with "Items that already exist" = Keep my version, only add what is missing (see Demo import).

2.One-click demo import

Jizan ships 23 ready-made homepages. Every demo imports the same shared Jizan content (posts, pages, categories, menus, widgets, authors, forms, ads) and then sets its homepage as the front page together with its colour skin and header style. Switching to another demo later re-uses the same content and only changes the front page, skin and header.

The 23 demos

Preview any demo at jizan.fekbd.com or with the Live preview button on its card.

Import a demo step by step

1. Make sure Elementor and Jizan Core are active (and Contact Form 7 if you want the contact forms).
2. Go to Jizan → Demo Import. Each homepage has a card with a screenshot.
3. Click Live preview to open the demo in a new tab, or Import to open the import options of that card.
4. Under What to import keep the boxes you need (all are ticked by default): Content (posts, pages, categories, images, menus), Widgets, Theme options, Front page and posts page, and Download the demo photos from jizan.fekbd.com (otherwise placeholder images are used).
5. Under Items that already exist choose Update them with the demo version (default, fresh sites) or Keep my version, only add what is missing (sites with your own changes).
6. Click Start import and confirm. A progress list shows each step: Categories and tags, Images, Demo authors, Contact forms, Posts and pages, Page parents / Elementor data, Menus and menu locations, Widgets, Theme options, Front page and settings, Finishing. Keep the tab open until you see Import complete.
7. Click View site. Done.

What gets imported

• Content: about 240 posts and pages (all 23 homepages, About Us, Advertise With Us, Contact, Authors, Blog Style 1-7), categories with colours and sub-categories, tags, images, demo authors (Author role, random passwords), Contact Form 7 forms, review data, story highlights.
• Menus: Main Menu (with the Homepage and Features mega menus), Top Menu, Footer Menu and Off Canvas Menu, assigned to their locations.
• Widgets: Blog Sidebar, Footer A-D and the header banner. Your old widgets are moved to Inactive widgets, never deleted.
• Theme options: all Jizan options, including the demo's skin and header, plus the ads manager house ads.
• Settings: the front page (Settings → Reading).
• Photos: the package contains placeholder images. With the photo option ticked, the real demo photos are downloaded from jizan.fekbd.com. They are free Unsplash photos for preview purposes; replace them with your own images on a live site.

Re-import, switch demo, reset

• Re-import / switch: running an import again never creates duplicates. Import another demo at any time to switch the front page, skin and header.
• Backup: before each run, your previous theme options, widget areas, menu locations and front page are saved as a backup in the database (option jizan_core_import_backup).
• Reset the options only: Jizan → Theme Options → Import / Export → Reset all options.
• Start from zero: the importer never deletes anything. To remove demo content, delete posts/pages/media in bulk from their lists, or, on a site without real content, use a reset plugin such as WP Reset and import again.
• Developers: WP-CLI is supported: wp jizan-core demo list, wp jizan-core demo import fashion --mode=keep.

Common problems

3.Theme Options

All global settings live in Jizan → Theme Options. The tabs are on the left; all tabs are saved together with Save Changes (top right and bottom). Fields that depend on another setting only appear when they apply (for example the gradient colours appear only for the "Gradient" nav bar style). Empty colour fields mean "automatic" (taken from the Style Kit skin).

General

Style Kit

Colour Skin (17 skins + Custom with Custom Skin - Primary / Custom Skin - Secondary) and the global Header Style (8 headers). Full details in Style Kit, colors & typography and Header.

Header

Top Bar Social

Header Social Icons turns the icons on in the top bar; Header Social Icons Color sets their colour. Then fill the profile URLs: Facebook, Twitter, LinkedIn, Instagram, Google Plus, Pinterest, Behance, Windows, Android, Apple. Empty fields are not shown. The same URLs feed the social icons of the off-canvas panel and the premium footer.

News Scroller

Typography

Each field has font family, weight and size: Body Text Font, Header Navigation, Off-Canvas Navigation, Mega Menu (also the font family of the premium navigation bar), Site Titles (headings, titles, metas) and Miscellaneous Fonts (sidebars, categories, buttons). The default Oswald and Roboto Condensed fonts are served from the theme folder (no request to Google).

Navigation

Colors

Site Loader Color, Site Links Color, Brand Color Background and Brand Color Foreground. When these still hold the default red, the Style Kit skin replaces them automatically; a colour you change yourself is kept.

Featured Posts

Title colours (regular / hover) and image overlay colours (with opacity) for each post layout: Featured Posts 1-3, Grid Style 1 and 2 (100% and 66%), Grid Overlay, Grid Overlay Small, List Style and Card Grid Style 1 and 2. "100%" is the full-width version of a layout, "66%" the version for a two-thirds column.

Blog & Single

AJAX & Loading

Reading

Dark Mode, Default Colour Scheme, Dark Mode Logo, Reading Progress Bar, Table of Contents (Position, Minimum Headings, Start Collapsed, Sticky Contents in Sidebar), Sticky Share Bar, Select & Share, Font Size Buttons and "Check Also" Box. Each is explained in Posts → Reading tools and Dark mode.

Layout & Breadcrumbs

SEO & Schema

Structured Data, Organization Name, Organization Logo and Social Profiles. See Schema.

Footer

Footer Design, Footer Logo, about text, social icons, newsletter, back to top, colours and copyright. Explained field by field in Footer.

Advanced and Custom Code

Import / Export

• Download JSON: saves every option as a file (a backup, or to copy your settings to another site).
• Import: paste a Jizan export (or an old Redux export of Jizan) and click Import.
• Reset all options: restores every option to the theme defaults (asks for confirmation; cannot be undone).

4.Header

The header is built from parts you can switch on and off: the top bar, the logo area with an optional header ad, the breaking news ticker and the navigation bar. Jizan has 8 header layouts; you pick one for the whole site and can override it on any page.

The 8 header styles

Choose the global header

1. Go to Jizan → Theme Options → Style Kit.
2. Under Header Style click the preview of the header you want.
3. Click Save Changes. Every post, archive and page now uses this header (unless a page has its own).

Use a different header on one page

1. Open the page in Pages → All Pages → Edit.
2. In the right sidebar (tab Page) find the Page layout box.
3. Choose a value in Header style (Header 1 - classic … Header 8). "Theme default" = the Theme Options header.
4. Click Update / Save.

Inside Elementor you can do the same: click the gear icon (Page Settings) → section Jizan Style Kit → Page header style. Both places are kept in sync. Reload the Elementor preview to see the new header.

Logo, retina logo, dark logo

• Logo: Theme Options → General → Logo → Upload / Select. PNG or SVG with a transparent background works best.
• Retina: upload the logo at twice its display size; the theme scales it down, so it stays sharp on high-density screens.
• Dark logo: Theme Options → Reading → Dark Mode Logo: a light version shown in dark mode. Empty = the normal logo is shown inverted.
• Off-canvas logo: General → Off Canvas Logo. Footer logo: Footer → Footer Logo.

Top bar

Turn it on or off with Theme Options → Header → Top Header. It contains:

• the hamburger (opens the off-canvas panel),
• the date (Date on Top Header, Header Date Color),
• the Top Menu (assign a menu to the "Top Menu" location, see Menu locations),
• social icons (Top Bar Social tab), the dark mode switch and the login icon.

Colours: Header Background Color and Header Links Color. With a Style Kit skin the top bar takes the skin's dark colour automatically.

Breaking news ticker

Configure it in Theme Options → News Scroller (see News Scroller). The ticker shows one headline at a time with a thin progress line, pauses when hovered, and has previous / next arrows. The Minimal site layout hides it.

Header ad

Headers 1, 3 and 4 have a 728 × 90 ad area next to the logo. Fill it in one of two ways:

1. Ads manager (recommended): create an ad unit in Jizan → Ads and choose it in the placement Header - next to the logo (replaces the Header Banner widget area). Device targeting and "hide for logged-in users" work here. See Ads manager.
2. Widget: leave that placement on "- Off -" and put a widget (for example an Image widget or the Jizan Ad widget) into the widget area Header Banner 728x90 in Appearance → Widgets.

Header 2 uses its own widget areas: Top Banner (Before Header) above the header, and Header Banner 370x Any size Left / Right on both sides of the centred logo.

Navigation bar

The navigation bar is the menu bar of the classic headers. Its settings are in Theme Options → Header, from Navigation Bar Style to Navigation Bar - Sticky. Empty colour fields follow the Style Kit skin.

Search window and live search

1. Turn on Theme Options → Navigation → Modal Search. A round search button appears in the menu bar (and in the phone menu bar).
2. Turn on AJAX & Loading → Live Search: results (posts with image, category and date, matching categories and authors) appear while typing, from 2 characters. Arrow keys + Enter work; Esc closes.
3. Optional: Search Overlay Tint (glass colour) and Popular Searches (chips shown before typing, separated by commas).

Dark mode switch

The sun/moon button appears automatically when Theme Options → Reading → Dark Mode is on: in the top bar (Headers 1, 2, 3, 7), at the end of the main menu (Headers 4, 5, 6, 8), in the phone bar and in the off-canvas panel. See Dark mode.

Account / login window

• Theme Options → Header → Header Login shows the user icon in the top bar. It opens a window with Login, Register and Lost password (no page reload).
• The Register tab only appears when Settings → General → Membership: Anyone can register is ticked.
• Modal Login Background sets an optional background image for the window.

5.Menus and mega menu

Jizan has four menu locations and three kinds of mega menu. Everything is done in Appearance → Menus; there is no separate mega menu builder to learn.

Create a menu

1. Go to Appearance → Menus and click create a new menu. Type a name (for example "Main Menu") and click Create Menu.
2. In Add menu items (left) open Pages, Posts, Custom Links or Categories, tick items and click Add to Menu.
3. Drag items to reorder them. Drag an item slightly to the right to make it a sub item of the item above.
4. Click the small arrow on an item to open its settings (Navigation Label, CSS Classes, Jizan fields).
5. Click Save Menu.

Menu locations

Assign menus in Appearance → Menus → Manage Locations, or tick the location under "Menu Settings" at the bottom of a menu.

The mega menu types

Category mega menu with AJAX posts

Every category placed at the top level of the Main Menu automatically becomes a mega panel. When the visitor hovers or focuses it, the panel opens with a spinner and loads the category's latest posts (image, title, date and review score) without reloading the page.

• Without sub items: the panel shows 4 post cards of that category.
• With sub items (sub-categories): the sub-categories are listed on the left; the panel shows 3 cards. Hovering a sub-category loads its own 3 latest posts.
• The AJAX loading is controlled by Theme Options → AJAX & Loading → AJAX Mega Menu. If you turn it off, the posts are printed directly in the page (no loading on hover).
• The category colour (Posts → Categories → Category colour) is used as the accent of the item.
• Without JavaScript the panel shows a link "All posts in <Category>".

Worked example: build the "Celebrities" mega menu

1. Create the categories in Posts → Categories: "Celebrities", then "Red Carpet", "Interviews" and "Style Icons" with Parent Category = Celebrities. Optional: pick a Category colour for Celebrities.
2. Go to Appearance → Menus and select your Main Menu.
3. Open the Categories box (click View All if needed), tick Celebrities, Red Carpet, Interviews and Style Icons, and click Add to Menu.
4. Drag Celebrities to the top level (no indent).
5. Drag Red Carpet, Interviews and Style Icons under it, slightly to the right, so they show "sub item".
6. Click Save Menu. Hover "Celebrities" on your site: the sub-categories appear on the left and 3 posts on the right.

Multi-column link mega menu (Homepage, 3 columns)

The "Homepage" menu of the demo is a mega columns panel: three column titles, a list of links under each and a preview picture on the right that shows the featured image of the link you hover.

Worked example: build a 3-column "Homepage" menu

1. In Appearance → Menus add the top-level item, for example the page "Homepage" (or a Custom Link with URL #).
2. Open Custom Links, enter URL # and Link Text "News & Magazine", click Add to Menu. Repeat for "Lifestyle & Culture" and "Tech, Sport & Living". These are the column headings: a Custom Link with the URL # is printed as a plain title, not a link.
3. Drag the three headings under "Homepage" (sub items, level 2).
4. Add the pages you want in the columns (Pages box) and drag each under its heading (level 3).
5. Open the "Homepage" item (click its arrow) and tick Mega columns (Main Menu): sub-items are column titles, their sub-items the links.
6. Optional: type New in Badge (e.g. NEW) on any link, or add the CSS class jizan-menu-highlight to highlight one link.
7. Set a featured image on the linked pages: it becomes the hover preview (pages without an image show no preview).
8. Click Save Menu.

Each column holds about 8 links comfortably. Three columns plus the preview fill the panel; with more columns the preview is narrower.

Column drop-down (Features, 4 columns)

A top-level item that is not a category and has three levels (item → sub items → their sub items) opens as a full-width drop-down with one column per sub item. This is how the demo's "Features" menu works. The columns open one after another with a soft animation.

Worked example: build a 4-column "Features" menu

1. Add a Custom Link with URL #! and Link Text "Features" (top level). #! keeps the page from jumping when the item is clicked, and in the off-canvas panel it simply opens the accordion.
2. Add four Custom Links with URL #!: "Blog Styles", "Post Designs", "Post Features", "Pages & Archives". Drag them under "Features" (level 2). These are the column titles.
3. Add your pages and posts and drag them under the right column title (level 3). Up to 7-8 links per column look best.
4. Do not tick "Mega columns" here (that is the other layout with the preview pane).
5. Click Save Menu.

Picked-posts mega menu (Reviews)

1. Add a Custom Link (URL #) "Reviews" at the top level.
2. Open it and type jizan-mega-posts in CSS Classes (optional) (enable the field in Screen Options first).
3. Add the posts you want to feature (Posts box) as its sub items. Each post is shown as an image card with title and date.
4. Click Save Menu.

Labels and badges

• Badge: every menu item has the field Badge (e.g. NEW) (up to 12 characters, for example NEW, HOT, LIVE). It works in the Main Menu, the off-canvas panel, the footer and the top menu.
• CSS class shortcuts: jizan-badge-new adds a "New" badge; jizan-menu-highlight highlights a link (bold white with an accent line).

Icons in menu items

Jizan loads Font Awesome 4.7. Put an icon in the Navigation Label of any item, before the text, for example:

<i class="fa fa-bolt"></i> Breaking
<i class="fa fa-play-circle"></i> Video

Icon names: see the Font Awesome 4.7 icon list (fontawesome.com/v4/icons). Keep labels short so the bar fits on one line.

Mobile behavior

• Below 960 px the navigation bar is replaced by the phone bar with a MENU button, the search button and the dark switch.
• The MENU button opens the off-canvas panel with the Main Menu as an accordion: mega-column titles become groups, the Features columns become sub-accordions, category items open their sub-categories.
• Category items that have no sub items in the menu automatically list their sub-categories (option Off-canvas: Automatic Sub-categories).
• Between 980 and 1199 px the desktop bar becomes tighter so up to 7 top-level items fit on one row. Keep the Main Menu to about 7 top-level items.

6.Off-canvas menu

The off-canvas panel slides in from the side when the visitor clicks the hamburger (top bar) or the MENU button on phones. It contains the logo, a live search field, the Main Menu as an accordion, quick links, trending posts, social icons, a dark mode switch, an optional card with a button and the copyright line. Esc, the X button or a click on the page closes it; keyboard focus stays inside while it is open.

Options

All in Jizan → Theme Options → Header, under Premium Off-canvas Panel:

The panel logo is General → Off Canvas Logo; the menu font is Typography → Off-Canvas Navigation.

Menu location and quick links

1. Create a short menu (for example Authors, Contact, About Us, Advertise With Us).
2. Assign it to the location Off Canvas Menu (Appearance → Menus → Manage Locations).
3. It appears as "Quick links" in a 2-column grid under the Main Menu. With Off-canvas: Menu On Desktop = Off Canvas Menu only, desktop visitors see only this menu.

The card

Example from the demo: Off-canvas: Card Title "Advertise with us", Off-canvas: Card Text "Put your brand in front of 4.2 million engaged readers…", Off-canvas: Button Text "Get the media kit", Off-canvas: Button Link = your Advertise page URL. Use it for a newsletter, an app download or a subscription offer.

7.Footer

Jizan 2.1 has a premium footer: a top band with logo, about text, social icons and a newsletter sign-up; four widget columns (Footer A-D); and a bottom bar with copyright, footer menu and a back-to-top button. The classic 2.0 three-column footer is still available.

Footer options

Jizan → Theme Options → Footer:

How to edit each part

1. Logo, about text, newsletter, copyright: Theme Options → Footer, then Save Changes.
2. Social icons: enter your URLs in Theme Options → Top Bar Social.
3. The four columns: Appearance → Widgets → widget areas Footer A, Footer B, Footer C, Footer D. The demo uses: A = Custom HTML (about text + contact lines), B = Jizan Posts (thumbnails list), C = Jizan Categories (colour dots), D = Tag Cloud. Empty areas are skipped and the other columns share the width.
4. Footer menu: create a menu and assign it to the Footer Menu location (one level, no sub items).
5. Subscribers: sign-ups from the built-in list are listed in Jizan → Subscribers. They are included in WordPress's Tools → Export Personal Data / Erase Personal Data.

Category and tag limits

In the footer columns the WordPress Categories widget lists only top-level categories, 8 at most, sorted by number of posts; the Tag Cloud shows the 15 most used tags. This keeps the columns even. Developers can change it with the filters jizan_footer_categories_args and jizan_footer_tag_cloud_number, for example:

add_filter( 'jizan_footer_tag_cloud_number', function () { return 25; } );

8.Ads manager

The ads manager (Jizan → Ads, from Jizan Core) lets you create an ad once as an ad unit and then show it in any placement: the header, inside articles, between posts, the sidebar, a phone sticky bar or any Elementor page. Ads are device-aware and work with page caching (device rules are CSS based).

Create an ad unit

1. Go to Jizan → Ads and click + Add ad unit (under the list of units).
2. Type a name, for example "Leaderboard - Newsletter". The name is what you choose later in placements, widgets and the Elementor Ad Slot.
3. Choose the type:
   • Image + link: click Choose image (or paste an image URL), fill Link and Alt text, and tick Open the link in a new tab if wanted.
   • HTML / AdSense code: paste the code into Ad code. Scripts are only saved for administrators (users with the "unfiltered_html" capability).
4. Show on: tick Desktop (1200 px and wider), Tablet (768-1199 px) and/or Mobile (below 768 px).
5. Optional: Show the small "Advertisement" label and Hide for logged-in users.
6. Click Save ads. After saving, the unit shows its ID (for example ID: ad1a2b3c4d) and appears in every placement list.

Placements

In the Placements box choose a unit for each place (or "- Off -") and click Save ads.

Device targeting and logged-in users

• Untick a device in Show on to hide the unit there. Each placement holds one unit, so for different sizes per device use a responsive unit (AdSense responsive, or an image that scales), or show a desktop unit in one placement and a mobile unit (for example 320×100) in another, such as the phone sticky bar.
• Hide for logged-in users (per unit) or Hide all ads for logged-in users (global, in the Placements box) keeps your own pages clean while you work.
• Per post: tick Disable ads on this post in the Post settings box of a post (sponsored articles, sensitive news).
• Note: "between posts" ads inside blocks loaded later with Load more are cached for everyone, so "hide for logged-in" applies only to the first page there.

Example: Google AdSense setup

1. In your AdSense account create a Display ad unit (responsive) and copy its code. It looks like:

   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
   <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1234567890123456"
        data-ad-slot="1234567890" data-ad-format="auto" data-full-width-responsive="true"></ins>
   <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

2. In Jizan → Ads click + Add ad unit, name it "AdSense - In article", choose HTML / AdSense code and paste the code into Ad code.
3. Tick the devices, keep the "Advertisement" label (AdSense recommends labeling ads) and click Save ads.
4. Choose "AdSense - In article" in Single post - inside the content, set after paragraph to 3, and click Save ads.
5. Repeat with other AdSense units for the header, after the content or the sidebar (Jizan Ad widget).
6. Add your ads.txt file (from AdSense) to the root of your site, and clear your cache.

9.Homepages with Elementor

Every demo homepage is a normal WordPress page built with Elementor (free) and set as the front page. Open it with Edit with Elementor. The Jizan widgets are in the Jizan category of the Elementor panel (search "Jizan" or scroll to the category).

The 21 Jizan widgets

Common block options

The post widgets (Category Posts, Latest Posts, Latest Panels, Category Panels, Review Posts, Showcase) share these controls:

Animation: new posts fade and slide up one after another and a thin spinner shows while loading; it is automatic and respects the visitor's "reduce motion" setting. For extra entrance effects use Elementor's Advanced → Motion Effects on any widget.

Build a homepage from scratch

1. Go to Pages → Add New Page and type a title (for example "Home").
2. In the right sidebar (Page tab) set Template to Homepage (full width, no default sidebar).
3. Optional: in the Page layout box choose a Page skin, Header style, Site layout and Navigation bar style.
4. Click Publish, then Edit with Elementor.
5. Click the + in the canvas and add a Container with a full-width structure. Drag Latest Panels into it for the top mosaic; choose a Panel Layout and set Pagination to Next / Prev arrows.
6. Add a second container with two columns (about 66% / 33%). In the wide column add Category Posts blocks (one per category: choose Category, Post Style, Category Tabs and Pagination). In the narrow column add Jizan Sidebar and choose a widget area (for example Blog Sidebar or Extra Sidebar 1, filled in Appearance → Widgets).
7. Add more sections: Stories Strip, Video Playlist, Showcase, Ad Slot, Newsletter Band… Use the "100%" layouts in full-width sections and the "66%" layouts in the wide column.
8. Click Publish.
9. Go to Settings → Reading, choose A static page, select your page as Homepage and click Save Changes.

Page layout box (per-page skin, header, nav style)

Every page has the Page layout box (right sidebar of the page editor). It overrides the global settings for that page only:

Skin and header are also in Elementor: gear icon → Jizan Style Kit → Page skin / Page header style.

10.Posts

The 7 single post styles

Global vs per-post style

1. Global: Jizan → Theme Options → Blog & Single → Single Post Design → choose a style → Save Changes.
2. One post: edit the post; in the right sidebar open the Post settings box and choose a style ("Default (Theme Options)" follows the global value; the line "Default now:" shows which one). Click Update.

Sidebar options

• Single posts and archives use the Blog Sidebar widget area; Styles 3 and 6 have no sidebar; Style 7 follows Post Style 7 Sidebar.
• Pages use the template Page with Sidebar to show the Page Sidebar area; the Default template is full width.
• Sticky Sidebar (Blog & Single) keeps the sidebar visible while scrolling on desktop.

Post formats (video, audio, gallery)

1. In the post editor sidebar set Format to Video, Audio or Gallery.
2. Scroll to the Post format media box (under the content; in the block editor open the "Meta Boxes" panel at the bottom).
3. Fill Video (YouTube / Vimeo URL), Audio (SoundCloud page URL) or click Add / edit images for Gallery images.
4. Update the post. The media replaces the featured image at the top of the article, and video posts can be used by the Video Playlist widget.

Review system

1. Edit a post and find the Review box (under the content / "Meta Boxes" panel).
2. Tick Enable review for this post.
3. Score type: 5-star scale (0.5 steps) or Out of 10 (0.1 steps).
4. Review box position: Default (Theme Options), Top - before the content, Center - in the middle of the content, Bottom - after the content, or Where I put [jizan_review] (place the shortcode yourself).
5. Fill Review title and Summary.
6. Under Criteria add rows with a Label and a Score (Add criterion). Each criterion is shown as a percentage bar.
7. The Overall score is the average automatically; use Manual override (optional) to set your own.
8. Add Pros and Cons (Add pro / Add con) and a Verdict. Update the post.

Percent scores: criteria are always displayed as percentage bars. Old Jizan 1.x "Inline Review" percent scores are converted automatically to the "Out of 10" scale.

Reading tools

All in Theme Options → Reading (on by default) and working with every post style:

11.Archives, categories, search and SEO

Archive pages

Category, tag, author, date and search pages use Theme Options → Blog & Single → Category Layout Options (5 layouts), the Excerpt Length, and AJAX & Loading → Archive Pagination (Load more by default). The category description (Posts → Categories) is shown under the archive title.

Category colours

1. Go to Posts → Categories and edit a category (or add a new one).
2. Click Select Color under Category colour and pick a colour. Empty = brand colour.
3. Click Update. The colour is used for the category labels on cards, block tab underlines, the mega menu accent and the archive header. Sub-categories without their own colour use the brand colour. Turn the feature off in Layout & Breadcrumbs → Category Colours.

Live search

See Search window and live search. The search results page uses the archive layout and Load more. The off-canvas panel has its own live search field.

Breadcrumbs

Layout & Breadcrumbs → Breadcrumbs shows "Home / Parent category / Category / Title" on posts, pages, archives, search and author pages (inside the hero on Style 4).

Schema (structured data)

With SEO & Schema → Structured Data on, Jizan Core prints one JSON-LD graph per page: NewsMediaOrganization (name, logo, social profiles), WebSite with SearchAction, NewsArticle on posts (headline, image, dates, author, publisher, section, word count), BreadcrumbList, and Review for reviewed posts. Fill Organization Name (empty = site title), Organization Logo (at least 112 px; empty = header logo) and Social Profiles (one URL per line). When Yoast SEO, Rank Math, All in One SEO or SEOPress is active, Jizan skips its own schema automatically to avoid duplicates.

Author pages and the authors list

• Users → Profile: Profile photo (Choose photo; used instead of Gravatar everywhere), Biographical Info, and under Social Profiles: User Title, Twitter, Facebook, Google+, Pinterest, LinkedIn, Instagram, YouTube, Behance.
• Author archives (/author/name/) show the author card and their posts.
• Authors list: create a page with the template Authors List Page.
• Blog & Single → Author Box adds the author card under every post.

404 page

The 404 page is designed by the theme: a large "404!", the message "Oops! Page not found!" and a Back to Home button, with your normal header (menu and search) and footer. There is nothing to set up; change the texts with a translation (see Translation).

12.Style Kit, colors, dark mode, RTL and translation

Style Kit (17 skins)

Theme Options → Style Kit → Colour Skin: one click recolours links, labels, buttons, the mega menu, spinner, ticker, review badges and dark mode. Colours you changed yourself in the Colors tab are kept, and category colours stay their own.

Jizan Red   Crypto Orange   Sunset Orange   Food Coral   Cinema Red   City Raspberry   Lifestyle Rose   Tech Purple   Gaming Neon   Business Blue   Newsroom Blue   Travel Teal   Health Mint   Sports Green   Classic Black / Gold   Newspaper Ink   Minimal Mono   + Custom

1. Open Theme Options → Style Kit and click a skin card (each card is a mini preview).
2. For your own brand choose Custom: Custom Skin - Primary (links, labels, buttons, accents) and Custom Skin - Secondary (dark colour of the top bar) appear.
3. Click Save Changes. A page can use a different skin (Page layout box).

Colors and typography

Fine-tune colours in the Header, Navigation, Colors, Featured Posts and Footer tabs, and fonts in the Typography tab (see Theme Options). Section Heading Style (General tab) changes all block and widget titles at once.

Dark mode

1. Theme Options → Reading → Dark Mode = On adds the sun/moon switch.
2. Default Colour Scheme: Light, Dark or System (follows the visitor's device). The visitor's choice is remembered in the browser and applied before the page paints (no white flash).
3. Upload a light logo in Dark Mode Logo.

RTL

Jizan includes a complete rtl.css. It loads automatically when the site language is right-to-left (Arabic, Hebrew, Persian, Urdu…) in Settings → General → Site Language. Menus, mega menus, the off-canvas panel (slides from the right), ticker and sliders are mirrored.

Translation

• Translation templates: jizan/languages/jizan.pot (text domain jizan) and jizan-core/languages/jizan-core.pot (text domain jizan-core).
• Loco Translate (easiest): install it, go to Loco Translate → Themes → Jizan → New language, choose the language and location "System" (wp-content/languages/themes/, safe from updates), translate and save. Repeat for Plugins → Jizan Core.
• Poedit: open the .pot, translate, and save jizan-xx_XX.po/.mo in wp-content/languages/themes/ (plugin: jizan-core-xx_XX.po/.mo in wp-content/languages/plugins/).
• WPML / Polylang (multilingual sites): translate posts, pages and categories as usual; create a menu per language and assign it to the same location per language; translate widget texts per language. Theme Options texts (footer about text, copyright, ticker title, off-canvas card) can be translated with WPML String Translation → Admin Texts (option jizan_option) or Polylang's string translation with a small snippet, or replaced by widgets.

13.Widgets and sticky sidebar

Widget areas: Blog Sidebar, Page Sidebar, Footer A-D, Extra Sidebar 1-5 (for the Elementor Jizan Sidebar widget), BBPress Sidebar, Top Banner (Before Header), Header Banner 370x Any size Left / Right, Header Banner 728x90.

1. Go to Appearance → Widgets.
2. Click a widget area to open it, then click the + (Toggle block inserter) button at the top left.
3. Search "Jizan" and click a widget (for example Jizan Posts). It is added to the open area.
4. Fill its settings in the block and click Update (top right).

The 12 Jizan sidebar widgets

The theme also keeps its classic widgets (KT About Me or Website, KT Image Banner, KT Code Banner, KT Latest Posts, KT Most Read Posts, KT Popular Posts, KT Social Follow, KT Social Buttons, KT 300x250 / 125x125 / Header Advertisement), and the WordPress core widgets are restyled to match.

Sticky sidebar

Theme Options → Blog & Single → Sticky Sidebar: the sidebar stays in view while the visitor scrolls the longer content column (posts, archives, pages and the Elementor Jizan Sidebar widget). It is off on phones, where the sidebar moves below the content. It also respects the sticky navigation bar height.

14.Performance, FAQ and help

Performance tips

• Built in: bundled and per-feature CSS/JS, fonts served locally, lazy images with width/height, WebP copies of new uploads (Jizan Core), image quality 78, no jQuery Migrate and no emoji script on the front end, Contact Form 7 files only on pages with a form, deferred scripts, AJAX responses cached for 5 minutes.
• Use a page cache: LiteSpeed Cache (on LiteSpeed hosts), WP Super Cache, W3 Total Cache or your host's cache. After changing Theme Options or menus, purge the cache.
• Minify / combine: if a "combine JavaScript" or "delay JavaScript" option breaks menus, tabs or Load more, exclude files whose names start with jizan from that option.
• Do not block the REST API for visitors: AJAX blocks, mega menus, live search and widgets use /wp-json/jizan/v1/.
• Images: upload photos around 1600-2000 px wide, JPG quality 80. Jizan creates the sizes it needs (for example 1050 px and 480 px cards). After installing Jizan on an existing site, run the "Regenerate Thumbnails" plugin once so old images get the Jizan sizes (and WebP copies).
• Keep homepages reasonable: 10-14 sections are plenty; use Load more instead of very long blocks.
• The demo Main homepage loads about 526 KB with about 41 requests on first view (measured on the live demo).

FAQ and troubleshooting

The menu shows no mega menu.

Check Navigation → Mega Menu = On, that the menu is assigned to Main Menu, and that the item is at the top level. A category gives a posts panel; for columns tick "Mega columns". Clear your cache.

Load more, tabs or mega menu posts do not load (spinner keeps turning).

A security or cache plugin blocks /wp-json/jizan/v1/, or a JavaScript optimizer broke the scripts. Allow the REST API, exclude Jizan scripts from combine/delay, and purge caches.

The homepage is empty after the import.

See Common problems: Settings → Reading, Elementor → Tools → Regenerate CSS & Data, clear caches.

My colour changes do not show.

A page may have its own skin (Page layout box), and the navigation bar uses its own colour fields. Clear your cache and Elementor CSS.

How do I go back to the 2.0 look?

See the table in Updating from 2.0 to 2.1.

The header ad does not show.

Headers 1, 3 and 4 have the 728×90 area; Header 2 uses its own widget areas; the Minimal layout hides the header banner. Check the unit's Show on devices and "hide for logged-in users" (log out to test).

Icons show as squares.

The server or CDN blocks the font files in jizan/fonts/. Allow WOFF/WOFF2 files (correct MIME types, CORS for CDNs).

Social share counts / weather do not appear.

Weather needs your server to reach open-meteo.com; when it cannot, the widget hides itself. Social Counter numbers are typed by you (no API).

Is Elementor Pro required?

No. Everything works with the free Elementor.

Changelog

2.1.0 - October 2026

• New: 17 more demo homepages - 23 in total, each with its own skin and header; About Us and Advertise With Us pages.
• New: Style Kit - 17 colour skins + Custom and the header style in one tab; per-page skin, header, layout, accent and navigation bar.
• New: premium navigation bar - 6 presets, animated indicator, smart sticky, full styling options.
• New: premium off-canvas panel (also the phone menu) and premium footer with newsletter.
• New: AJAX post blocks (Load more, Next / Prev, Numbered, Infinite scroll, category tabs with "More"), AJAX mega menu with sub-categories, mega columns with preview and badges, live search, AJAX archives, auto-load next article.
• New: single post designs 4, 5, 6 and 7.
• New: dark mode, reading progress, table of contents, font size buttons, "Check also", sticky share bar, "Select & share", story highlights.
• New: ads manager (header, before / inside / after content, between posts, sidebar, phone sticky bar, Elementor Ad Slot; device targeting).
• New: 9 Elementor widgets (Showcase, Stories Strip, Video Playlist, Weather, Social Counter, Market Ticker, Newsletter Band, Section Intro, Ad Slot) - 21 in total; 12 sidebar widgets.
• New: structured data, breadcrumbs, category colours, Full width / Boxed / Framed / Minimal layouts, complete RTL.
• Improved: speed, ticker, sidebar widgets, floating previous / next posts; demo importer fixes.

2.0.0 - October 2026

• Rebuilt for Elementor: Jizan widgets, review system, one-click demo import, Welcome page, Jizan admin menu, new Theme Options panel (no Redux), AJAX login, profile photos, single post design selector, sticky sidebars. Removed the need for Redux, WPBakery, ACF and other 1.x plugins. PHP 8 fixes.

1.1 - 2017

• Previous WPBakery / Redux version.

Credits and licenses

• Jizan theme and Jizan Core: GPL v2 or later.
• Font Awesome 4.7 by Dave Gandy - fonts SIL OFL 1.1, CSS MIT.
• Bootstrap 3.3.7 parts (MIT), Slick 1.8.1 (MIT), Flickity 2.3.0 (GPLv3), Magnific Popup 1.2.0 (MIT), Pace 1.2.4 (MIT), SlickNav 1.0.10 (MIT), Pushy 1.0.0 (MIT), Basic jQuery Slider 1.3 (GPL), modalEffects (MIT), TGM Plugin Activation 2.6.1 (GPL).
• Oswald and Roboto Condensed fonts: SIL Open Font License (served from the theme).
• Weather data: Open-Meteo (open-meteo.com, no API key).
• Demo photos: Unsplash (Unsplash License). They are not included in the download; the importer loads them from the live demo for preview purposes only.

Support

Jizan is made by FEKBD. Get help at fekbd.com/support (more themes and plugins at fekbd.com).

• Included: questions about features, help with installation and demo import, bug fixes and updates, for verified ThemeForest buyers during the support period of the purchase.
• Not included: custom modifications, third-party plugin conflicts beyond reasonable checks, server setup.
• Please send your purchase code, your site URL and a short description or screenshot of the problem. Read the FAQ first; most questions are answered there.