# Welcome

StyloThemes product documentation.

{% hint style="info" %}
If you need further assistance, please visit the Help & Support page from the above link at the top right.
{% endhint %}

## Browse Documentations

<table data-view="cards" data-full-width="false"><thead><tr><th></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>UrduPress</td><td> </td><td></td><td><a href="https://docs.stylothemes.com/urdupress/">UrduPress</a></td><td><a href="https://2406704626-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4R6StLTZw6A7OJzwAIMK%2Fuploads%2FhI0ntlQCjWiCLhrcOX0P%2Furdupress-web-thumb-min.jpg?alt=media&amp;token=3d358305-750f-4033-bc8d-ffd074e36407">urdupress-web-thumb-min.jpg</a></td></tr><tr><td>UrduPaper</td><td></td><td></td><td><a href="https://docs.stylothemes.com/urdupaper/">UrduPaper</a></td><td><a href="https://2406704626-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4R6StLTZw6A7OJzwAIMK%2Fuploads%2FSLANpz1MQErJCgyTQcZG%2Furdupaper-web-thumb-min.jpg?alt=media&amp;token=592ea2e9-ab79-417e-8366-9b6bb3a0ec9f">urdupaper-web-thumb-min.jpg</a></td></tr><tr><td>UrduNews</td><td></td><td></td><td><a href="https://docs.stylothemes.com/urdunews/">UrduNews</a></td><td><a href="https://2406704626-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4R6StLTZw6A7OJzwAIMK%2Fuploads%2FMRYrAAppwDL2KI35O0lS%2Furdunews-web-thumb-min.jpg?alt=media&amp;token=2817294a-4617-4c86-b884-ebb470a4c68f">urdunews-web-thumb-min.jpg</a></td></tr><tr><td>Qalam</td><td></td><td></td><td><a href="https://docs.stylothemes.com/qalam/">Qalam</a></td><td><a href="https://2406704626-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4R6StLTZw6A7OJzwAIMK%2Fuploads%2Feh5rsq7rmdUysZ8CraEV%2Fqalam-web-thumb-min.jpg?alt=media&amp;token=ef200199-e5b2-4e9d-bca3-c62b3426c650">qalam-web-thumb-min.jpg</a></td></tr><tr><td>UrduPress Lite</td><td></td><td></td><td><a href="https://docs.stylothemes.com/urdupress-lite/">UrduPress Lite</a></td><td><a href="https://2406704626-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4R6StLTZw6A7OJzwAIMK%2Fuploads%2FgMPdv1s5ExlwhKLhHDiD%2Furdupress-lite-web-thumb-min.jpg?alt=media&amp;token=6261dee1-94fd-4952-8ee3-2606389e6b97">urdupress-lite-web-thumb-min.jpg</a></td></tr><tr><td>Akhbaar</td><td></td><td></td><td><a href="https://docs.stylothemes.com/akhbaar/">Akhbaar</a></td><td><a href="https://2406704626-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4R6StLTZw6A7OJzwAIMK%2Fuploads%2F2NXMZTtIVDxLdsDyqtcx%2Fakhbaar-web-thumb-min.jpg?alt=media&amp;token=c29b9874-750d-45c3-a682-f62e04fe7a34">akhbaar-web-thumb-min.jpg</a></td></tr><tr><td>PinBlog</td><td></td><td></td><td><a href="https://docs.stylothemes.com/pinblog/">PinBlog</a></td><td><a href="https://2406704626-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4R6StLTZw6A7OJzwAIMK%2Fuploads%2FcHdZpIwlmJODIdKSdtvl%2Fpinblog-web-thumb.jpg?alt=media&amp;token=990187e6-4efc-485c-b477-6c6b8feac007">pinblog-web-thumb.jpg</a></td></tr></tbody></table>


# Installation

UrduPress is a premium WordPress theme built for Urdu news and blogs, offering native RTL support, elegant typography, and customizable layouts.

#### Prerequisites&#x20;

* WordPress 5.2 or higher
* PHP 7.1 or higher
* MySQL 5.6 or higher
* Kirki Customizer Framework plugin

#### Installation

1. Navigate to **Appearance > Themes** tabs in your WordPress Admin Dashboard
2. Click on **Add New Theme** button on upper-left section \
   ![](https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FR6EfdNsbCvKKnchiPBsO%2Fimage.png?alt=media\&token=961c261c-b9cf-4708-9abe-ed966dd26ec5)
3. Click on the Upload Theme button\
   &#x20;![](https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FQXGoR4hg268YEpaJGyYF%2Fimage.png?alt=media\&token=cc2029f1-65d3-4cbf-bc34-f6786f27d3f5)
4. Now Drag or Choose the pinblog.zip file from your computer (that you have downloaded from your account on [StyloThemes](https://stylothemes.com/my-account))<br>

   <figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FnidQ0OiHFkMEuX9VdvTo%2Fimage.png?alt=media&amp;token=3db9e695-c897-4393-8fa7-27cf061fbd88" alt=""><figcaption></figcaption></figure>

> NOTE: If you are facing trouble while installing a theme from your WordPress dashboard, it is most likely due to a resource limit at your web hosting. In this case, there are 2 options for you.

1. Install theme from cPanel / File Manager
2. Ask your web hosting provider to change the following settings for your account:
   * max\_upload\_limit = 32M
   * max\_execution\_time = 300
   * max\_post\_size = 32M

#### Activate Theme

After successful installation, Activate the theme.&#x20;

#### Required Plugins

This theme requires several plugins to be installed and activated. Some of them are required and some are recommended. You may ignore the recommended plugins but the required plugins must be installed and activated.&#x20;

Click on Begin installing plugins link in the notice

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FswDKROFZBylhb62ICxd1%2FWhatsApp%20Image%202025-09-02%20at%2019.02.29_eea53328.jpg?alt=media&amp;token=28777a82-3c90-4581-bcf9-be08a44efe9c" alt=""><figcaption></figcaption></figure>

Check all the plugins and select the Install option from the **Bulk Actions** dropdown

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FSnW2HexKfmlmD4h1IM9B%2F2.png?alt=media&amp;token=2eed4515-7689-4b5a-940c-50a5ba9065a4" alt=""><figcaption></figcaption></figure>

After the plugins are installed, make sure they are activated by navigating to the Plugins tab. Activate them if they are not activated.&#x20;

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2F9HSzhct6XzuHQoh5FILd%2F3.png?alt=media&amp;token=12974359-601e-4ead-a76f-781035fccfb2" alt=""><figcaption></figcaption></figure>


# License Activation

To unlock the full potential of the theme, you must activate your license key. Follow these steps to complete the activation process.

#### License Details

Your license key information is available in the License Keys tab on the website

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FteooZP45Iox1Nn4TPxAe%2Fimage.png?alt=media&amp;token=38e758c9-b912-452c-9731-140d03510298" alt=""><figcaption></figcaption></figure>

#### How to Activate

To activate the license key, first, make sure that you have installed and activated the StyloCore plugin

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2F58OZniH7FH3bpsOam0sB%2F4.png?alt=media&amp;token=372a298e-7b08-482a-ae76-1b2ed9636975" alt=""><figcaption></figcaption></figure>

Now, you will see a new tab on top of your WordPress admin dashboard. Click on this tab.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FW1Ec3NkYna0QarejMXwv%2F5.png?alt=media&amp;token=e25fae31-7405-4b4f-a893-a84b78deec61" alt=""><figcaption></figcaption></figure>

Now in the next screen, you need to provide the license key information along with your Order ID and Account Email (on our website)

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FIreHSqWl6vHf85EOJxjL%2Fimage.png?alt=media&amp;token=822c3d7c-b45a-4963-be90-4fa98065a758" alt=""><figcaption></figcaption></figure>

Add the required information, and make sure there are no spaces or extra characters. After adding information in the input boxes, click on the **Save Settings** button.&#x20;

{% hint style="warning" %}
You need to save the settings before attempting to activate the license key.
{% endhint %}

After saving the settings, click on the **Activate License** button. Your license key will be activated in a few seconds.&#x20;

{% hint style="danger" %}
If the license key is not being activated:

* First, make sure that your server is not blocking outgoing requests to our server (stylothemes.com)
* Check if any cache or security plugins are blocking the Ajax Call.
* Disable non-theme-related plugins one by one to check if any third-party plugin is causing conflicts with the theme.

{% endhint %}

Once the license key is successfully activated, you will the updated license count on the right side, and your license data will be hidden in the admin screen.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FplZUHWPIVN5qxwBwhUHi%2Fimage.png?alt=media&amp;token=ae23ea0e-d6bc-4933-acd1-1f609686418f" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
If the license count or other details are not updating correctly, you can safely ignore it. This may occur due to technical reasons but does not impact the theme's functionality.
{% endhint %}


# Demo Import

This theme comes with a fully featured demo that you can import with just one click. Follow the steps below to import the demo data.

#### Demo Plugin

First, make sure that the One Click Demo Import plugin is installed and Activated

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FfT9aZaeGa14Kf7OXJLgQ%2F6.png?alt=media&amp;token=f8bf39c5-b78f-498a-9545-9c3958a79801" alt=""><figcaption></figcaption></figure>

#### Demo Import

The link is available under the **Appearance** tab

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fp0cVvwUuGOIBXzZUAJ24%2F7.png?alt=media&amp;token=88feb729-ba73-41b2-a357-47f86ab2eb48" alt=""><figcaption></figcaption></figure>

On this page, you can see three variants available for import. Select one of the variants and click the ***Import Demo*** button, as shown in the image below.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FADHdOC1177BhlyKoDqvL%2F8.png?alt=media&amp;token=1ced1a8c-b39b-4e45-891e-246683608b24" alt=""><figcaption></figcaption></figure>

On the next screen, click on **Continue & Import** button

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FL2aTKvKaehlGfo2vLJfq%2F9.png?alt=media&amp;token=c7c03932-0609-451c-a036-a67320f17be6" alt=""><figcaption></figcaption></figure>

&#x20;This will start the demo import process and it may take a few minutes to fully import the demo data. The speed varies on different servers. <br>

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FcYODEV9K7oZH1kg9ssZl%2F10.png?alt=media&amp;token=4af5ade1-05e9-43d6-825e-05dfa12afc33" alt=""><figcaption></figcaption></figure>

After a few minutes, your demo will be imported. Please do not refresh or c lose the tab or the process will stop.&#x20;

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FlQZJuur8qvPCSEJ3z5yE%2F11.png?alt=media&amp;token=a6ae725c-0af3-4340-9baa-7b84b5423d9a" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
If the demo content import process is stuck, incomplete, or not working correctly, it likely means your hosting's PHP.ini limits are too low for the WordPress Importer. This prevents the demo data from being imported properly.

To resolve this, contact your web hosting support and request an increase in the following PHP.ini limits:

* **max\_execution\_time = 300** (600 recommended)
* **memory\_limit = 128M** (256M recommended)
* **post\_max\_size = 32M**
* **upload\_max\_filesize = 32M**
* **max\_input\_vars = 2000**
  {% endhint %}


# Sidebars & Widgets

This theme has custom sidebars and widget areas where you can display advertisements or other WordPress widgets.

### Requirements

Make sure that you have installed and activated the Classic Widgets plugin if you want to use the built-in theme widgets

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FXktmnEpP0hNUpsBAK5u4%2F12.png?alt=media&amp;token=6e4c5256-4186-405a-bd32-e2ea82a2ca14" alt=""><figcaption></figcaption></figure>

### Widget Areas

To manage widgets and sidebars, navigate to **Appearance > Widgets**

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FlZsYaYitteV4pLpfZg98%2F13.png?alt=media&amp;token=6dc30992-2281-4912-8bba-f97033ed9f6c" alt=""><figcaption></figcaption></figure>

This theme has 10 widget areas, you can drag any widget from the left side into any widget area.&#x20;

Five custom widgets come with this theme (may increase with updates)

* UPRESS - Latest Posts
* UPRESS - Popular Posts
* UPRESS - Popular Videos
* UPRESS - Prayer Times
* UPRESS - Weather Widget

### Advertisements

To add Google AdSense or other advertisement codes into any widget area or sidebar. Use the Custom HTML widget and drag it into the sidebar or click on it to expand the sidebar locations and choose from below

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fw0DV4mB5LQCUFvfwbGvo%2F15.png?alt=media&amp;token=7c35ffad-4cf9-4aef-a8a4-256056329192" alt=""><figcaption></figcaption></figure>

Add your advertisement code and click on Save&#x20;

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FIlzv8DZWr5BKmM22Q8s8%2Fimage.png?alt=media&amp;token=39f81d89-ee6f-457c-8abf-e6f31d2efd9b" alt=""><figcaption></figcaption></figure>

You can also place advertisement widgets within the header promotional banner area for better visibility and engagement.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FLPYb7KgL82lfxBtkY5E0%2F16.png?alt=media&amp;token=94327eb7-5084-45b7-b5f6-894fc4c3b7b1" alt=""><figcaption></figcaption></figure>


# Navigation Menus

This theme comes with pre-defined menu location that you can use to display different kinds of navigation.

### Header Menu

The theme includes a simple header menu for easy navigation.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FCwum6rGLkPwyBsewkpCN%2F18.png?alt=media&amp;token=58daf1f7-bb92-415a-b793-05351db769b2" alt=""><figcaption></figcaption></figure>

### Create a Menu

Create a new menu and name it anything you like. Now add links to the categories or pages from the left side.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fwf9PEAo9aBKVIzaStduR%2F19.png?alt=media&amp;token=5e8e05f9-3b9b-4f54-9908-9798572f09b1" alt=""><figcaption></figcaption></figure>

### Assigning Menus

Create your menu and select the location checkbox to assign the menu to that location

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FMEbyAqTgqlei0J0ziM3O%2F17.png?alt=media&amp;token=3287d8e7-eafa-4a6b-b0a8-491f845b8185" alt=""><figcaption></figcaption></figure>


# Videos Module

The Video Module in UrduPress allows you to add, manage, and display videos with categories and tags. It provides full control over how videos are shown on both the Video Page and the Single Video Pag

### 1. Adding a New Video

Videos are managed through a **Custom Post Type (CPT)**.

1. Go to **Dashboard → Videos → Add New**.
2. Add the **Title** and **Description** of your video.
3. Assign **Categories** and **Tags** to organize videos.
4. Enter the additional **Video Fields**:
   * **Video URL** – Add a YouTube, Vimeo, or self-hosted link.
   * **Duration** – Enter the length of the video (e.g., `5:30`).
5. Click **Publish** to save your video.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FOEnNWi31aiv3DMFkyUPA%2F20.png?alt=media&amp;token=f402ef4f-3161-4800-8ac9-cd1cf4d8bc70" alt=""><figcaption></figcaption></figure>

***

### 2. Customizer Settings – Video Page

Go to **Customizer → Videos Module → Videos Page** to configure the video archive page.

* **Featured Section**\
  Toggle **Enable/Disable** for the Featured Video section.
* **Autoplay**\
  Enable or disable autoplay for the Featured Video.
* **Video Blocks**\
  Add multiple blocks to organize videos (e.g., Courses, Talk Shows, Technology).
  * Each block can be connected with categories/tags.
  * Limit: Up to **10 rows**.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FCCoX4o4iIUOiqCczLiuG%2F21.png?alt=media&amp;token=a1df1af9-fc0c-4569-b75a-96f12a0f1939" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FA1YECpmhPtsV4ja9Wt4N%2F22.png?alt=media&amp;token=d10a2178-abe5-40a8-8e8d-8f8d763e0b22" alt=""><figcaption></figcaption></figure>

***

### 3. Customizer Settings – Single Video

Go to **Customizer → Videos Module → Single Video** to configure individual video pages.

* **Featured Section**\
  Enable/Disable the **Related Videos** section.
* **Section Heading**\
  Customize the heading text (e.g., `اس کیٹیگری سے مزید ویڈیوز`).
* **Videos Limit**\
  Select how many related videos to display (3, 6, or 9).

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FBJKSaPx0eN569uGOemg0%2F23.png?alt=media&amp;token=d18d5d67-9c70-43c7-9685-bbe0ded5d95a" alt=""><figcaption></figcaption></figure>

***

### 4. Summary

The **Video Module** is a powerful feature of UrduPress that helps you:

* Add and manage videos with categories/tags.
* Customize the **Video Archive Page** with featured blocks.
* Show **related videos** on the Single Video Page.

This ensures a complete and engaging video experience for your audience.


# General


# Color Scheme

Mange your website's color scheme.

Navigate to **Appearance > Customize > General > Color Scheme**

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FFXIS080piisz9DphSu63%2F24.png?alt=media&amp;token=60f2e67e-a445-4a52-8c0a-8c15776a6a53" alt=""><figcaption></figcaption></figure>

*Default: #f0f0f0,* \
*.../themes/upress/images/bg.png*

Tailor the color scheme of your website to suit your preferences.


# Global Layout

Customize the Global layout of the website

Navigate to **Appearance > Customize > General > Global Layout**

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FARgU3r0wh9sfMz5TC51h%2F25.png?alt=media&amp;token=0d773612-1c8c-4f38-b522-654116c72229" alt=""><figcaption></figcaption></figure>

### Body Layout

This theme comes with two container layouts:

* Boxed
* Full Width

Preview and select the one you like.

### Preloader Message

You can customize the preloader text as well by&#x20;

Navigating to **Appearance > Customize > General > Global Layout**

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FJ3CXOFvWL8QDSw2aOFOt%2F26.png?alt=media&amp;token=78a91f8e-dc24-4bcc-a245-d1a1a19a286f" alt=""><figcaption></figcaption></figure>


# Archive Layout

Navigate to **Appearance > Customize > General > Global Layout**

### Archive Layout

There are 3 archive layout options that you can choose to give a unique style to the posts archive pages.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FUcpvsyizPwyAQ34lBgbF%2F27.png?alt=media&amp;token=4045e2f5-64ec-4934-8649-110b7475159f" alt=""><figcaption></figcaption></figure>

### Archive Header

You can enable or disable the default Archive Header, which displays the archive title and description.&#x20;

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FcWNWA9j5nDjQOS3yCVuy%2F28.png?alt=media&amp;token=9a5fa0b4-dc95-4f3a-92f8-b30fcdb3ecc4" alt=""><figcaption></figcaption></figure>

### Grid Columns

You can customize the number of columns, and you can also control the post card by enabling or disabling the post thumbnail, post title, excerpt, and meta.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FW6o26SDn4HoUgj0xe5gg%2F29.png?alt=media&amp;token=6a29c44d-9c27-429e-831d-7553b21dc812" alt=""><figcaption></figcaption></figure>


# Header


# Layout

The Header Layout settings in UrduPress allow you to manage the overall structure and alignment of your site’s header. You can choose different layouts, control logo and banner placement, and organize

{% embed url="<https://youtu.be/c2sMQdpKkfE>" %}

### 1. Manage Header Style & Layout

From the **Customizer → Header → Header Layout**, you can manage different parts of the header.

* **Small Header** – Enables a compact header style.
* **Logo & Banner** – Allows you to display the site logo alongside a banner.
* **Navigation** – Controls the placement of the site navigation menu.

***

### 2. Header Content Alignment

You can choose how the **logo** and **banner** are aligned in the header.

Options available:

* **Logo & Banner** – Displays both logo and banner side by side.
* **Center Logo Only** – Centers the logo in the header.
* **Center Banner Only** – Centers the banner in the header.


# Date & Clock

This section lets you show a Digital Clock with English Date and the Islamic (Hijri) Date in the header.

### Digital Clock

* **Enable/Disable** the Digital Clock with English Date.

***

### Islamic Date

* **Enable/Disable** the Islamic Hijri Date.
* **Fix Islamic Date:** Adjust the date by adding or removing days.
  * Example: `-1` if the date is one day ahead, `+1` if it’s one day behind.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FjTQWPTSwAytPBIDZMpMA%2F30.png?alt=media&amp;token=d0d6500a-009e-4e90-bfa8-859c05420e3e" alt=""><figcaption></figcaption></figure>


# Navigation

The Main Navigation controls the style and behavior of your site’s top menu.

### Sticky Navigation

* **Enable Sticky Nav** – Keep the navigation bar fixed at the top while scrolling.

***

### Color Options

Each option includes a color picker for easy customization:

* **Background Color** – Set the background color of the navigation bar.
* **Menu Links Color** – Text color for main menu items. *(Default: #ffffff)*
* **Sub-Menu Links Color** – Text color for sub-menu items. *(Default: #ffffff)*
* **Menu Links Hover Color** – Text color for menu items on hover. *(Default: #ffffff)*
* **Menu Item Hover Background** – Background color on hover. Works only with **Simple Tabs** style. *(Default: #e94547)*

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FyrQJdSdHOLttewYlKjku%2F31.png?alt=media&amp;token=e28330da-7f02-4255-8b12-00c0b1cf527b" alt=""><figcaption></figcaption></figure>


# News Ticker

The Top Scrolling News Bar lets you display the latest posts or videos in a ticker-style bar at the top of your site.

### Post Type

* Select the post type to display in the ticker.
* Options: **Post** or **Video**.

***

### Color Scheme

* Choose a color scheme for the ticker.
* Options: **Light** or **Dark**.

***

### Select Category

* Display posts from a specific category.
* Leave empty to show posts from **all categories**.

***

### Limit Posts

* Define how many posts appear in the ticker. *(Example: 5)*

***

### Ticker Label

* Customize the label shown before the ticker. *(Example: اہم خبریں)*

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fo5YyKx5CnyHKSPURQOfl%2F32.png?alt=media&amp;token=35c9c472-5d84-49f4-a288-8eb5b21d26cd" alt=""><figcaption></figcaption></figure>


# Logo Settings

The Logo settings allow you to upload your website’s branding images for both desktop and mobile views.

### Desktop Logo

* Upload a valid image file (**.png, .jpg, .gif**) for the desktop version of your site’s logo.
* Options: **Select Image** or **Remove** to reset.

***

### Mobile Logo

* Upload a valid image file (**.png, .jpg, .gif**) for the mobile version of your site’s logo.
* Options: **Select Image** or **Remove** to reset.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FwyLWFUbPUvbNy16yOrVe%2F33.png?alt=media&amp;token=2ddf0c59-f8f5-4c8e-a9fb-8a2fe1e5191d" alt=""><figcaption></figcaption></figure>


# Footer


# Layout

The Footer Layout settings allow you to control the copyright row and footer widgets.

### Copyright Section

* **Show/Hide** the footer copyright row.
* Option: **Enable** to display, disable to hide.

***

### Footer Widgets

* **Show/Hide** the footer widget area.
* Option: **Enable** to display, disable to hide.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2F9J4D6j3bMOGuxBg61s9I%2F34.png?alt=media&amp;token=b1f04150-72ed-4033-b1ed-4e3a41cefada" alt=""><figcaption></figcaption></figure>


# Colors

The Footer Color Scheme settings let you customize the colors of the footer area to match your site’s branding.

You can edit these by navigating to **Customizer → Footer → Footer Colors**

### Widgets Background

* Set the background color for the footer widget area.

### Copyrights Background

* Set the background color for the footer copyright row.

### Widget Heading Border

* Choose a border color for footer widget headings.

### Text Color

* Set the footer text color.
* **Default:** `#dddddd`

### Links Color

* Set the color of footer hyperlinks.
* **Default:** `#ffffff`&#x20;

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fd9yrS2uwcmy347yk6rkA%2F35.png?alt=media&amp;token=653350e6-cdc8-4af0-bdaf-a8213c4cb7c5" alt=""><figcaption></figcaption></figure>


# Settings

The Footer Copyright setting allows you to add a custom copyright message to the footer. Basic HTML is supported.

### Footer Copyright

* Enter your website copyright text.
* You may include **HTML tags** such as `<a>` for links.

**Example:**

```html
Copyright © 2015-2023, UrduPress all rights reserved. 
Theme Designed by <a href="http://www.stylothemes.com">StyloThemes</a>
```

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2F6k0xwhoDrNVo9Dwf7mKS%2F36.png?alt=media&amp;token=2d72ba32-731d-457b-a14b-ec6a522b1537" alt=""><figcaption></figcaption></figure>


# Single Post


# Post Meta

The Post Meta Information settings let you control which details are shown with each post.

### Available Options

* **Post Author** – Show/Hide the author name. *(Default: Disabled)*
* **Post Category** – Show/Hide the post category. *(Default: Disabled)*
* **Post Views** – Show/Hide the post view counter. *(Default: Enabled)*
* **Post Comments** – Show/Hide the comment count. *(Default: Enabled)*
* **Posted Date** – Show/Hide the publish date. *(Default: Enabled)*

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FvrJEXrU8s3yJTpOclQcF%2F37.png?alt=media&amp;token=1de3aec3-6863-46b7-b4f9-1c78893ef0af" alt=""><figcaption></figcaption></figure>


# Post Layout

The Single Post Layout settings let you customize how individual blog posts are displayed.

### Options

* **Featured Image** – Show/Hide the featured image in the single post header. *(Default: Enabled)*
* **Mini Sidebar** – Show/Hide the mini sidebar on single posts. *(Default: Enabled)*
* **Zoom In/Out** – Enable/Disable font size increase/decrease buttons for readers. *(Default: Enabled)*
* **Show Related Posts** – Show/Hide related posts below the article. *(Default: Enabled)*
* **Related Posts Limit** – Set how many related posts to display. *(Example: 3)*
* **Comment Box Style** – Control the comment box visibility. *(Default: Always Show)*

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FDgY2oaRKTLWYAbp4m5St%2F38.png?alt=media&amp;token=808bbc0b-cdc6-49b2-9efa-dd21c5503f88" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FePVNX2lBKmVltQKzHqFd%2F39.png?alt=media&amp;token=d7f84d1a-6aec-4577-a0b2-a7e6a793c3d0" alt=""><figcaption></figcaption></figure>


# Typography


# Fonts Loader

The Fonts Loader lets you manage which fonts are loaded on the front-end. To improve site speed, only the fonts you activate will be loaded.

By Navigating Customizer → Typography → Fonts Loader

### Fonts Loader Settings

* **Activate Fonts** – Enable the fonts you want to use on your site.
* **Available Fonts:**
  * AhmadLT Regular
  * Alkatib Regular
  * AlQalam Regular
  * AlQalam Telenor
  * Nafees Nastaleeq
  * Lateef
  * Alkalami
  * Amiri Quran
  * Amiri
  * Gulzar
  * Katibeh
  * Markazi Text
  * Reem Kufi Fun
  * Sindhi

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FGMqft9ICFU6aGJ1Nftg3%2F40.png?alt=media&amp;token=0862210f-28ed-4f83-937f-55d88580eb2c" alt=""><figcaption></figcaption></figure>


# Headings

The Typography settings allow you to control how text appears across your website. You can choose from a variety of fonts, adjust sizes, and customize styles for headings, body text, and other element

### Headings

Control the look of your headings (H1–H6 tags).

* **H1** – Used for main titles.
* **H2** – Section headings.
* **H3–H6** – Subheadings or smaller titles.

For each heading level, you can:

* Select the **font family**
* Adjust the **size**
* Change **line height** and **spacing**
* Apply **uppercase, lowercase, or capitalize** styling

***

### Body Text

Manage the typography of your main content paragraphs.

* Choose the font family
* Adjust font size for better readability
* Set line height for comfortable spacing

### Widget Content

Customize the appearance of the actual widget content (e.g., list items, descriptions):

* Same controls as “Widget Headings” — choose font family, size, color, alignment, and spacing.

***

### How Font Selection Works (Using Kirki Typography Control)

When you open the Typography control in the Customizer:

1. **Font Family Dropdown** – Lists available fonts, including Google Fonts and system fonts.
2. **Live Preview** – As you change values (font family, size, etc.), you can see updates in real time.
3. **Performance Optimization** – Only activated fonts are loaded on your site, ensuring speed and efficiency .
4. **Single Panel Experience** – Kirki groups all typography options (font, size, spacing, color, alignment) into one clean control view.

***

### Tips

💡 Use no more than 2–3 fonts to keep your website design clean.\
💡 Larger line-height improves readability for body text.\
💡 Consistent heading styles make your content easier to scan.

{% embed url="<https://youtu.be/FsYrRLQ2eVk>" %}


# Sidebar Widgets

The Sidebar Widgets typography settings allow you to control how your widget headings and content text appear in the sidebar.

### Widget Headings

These settings apply to the **titles of widgets** (e.g., “Recent Posts”, “Categories”).

* **Font Family:** *Markazi Text*
* **Font Variant:** 700 (Bold)
* **Font Size:** 24px
* **Font Color:** Choose any color for widget headings.
* **Text Align:** Right
* **Text Transform:** None (you can change to uppercase, lowercase, or capitalize if preferred)
* **Text Decoration:** None (underline, line-through, etc. can be applied)
* **Line Height:** 30px
* **Letter Spacing:** 0

***

### Widget Content

These settings apply to the **text inside widgets** (e.g., post titles, categories list, archive items).

* **Font Family:** *Noto Nastaleeq*
* **Font Variant:** Regular
* **Font Size:** 14px
* **Font Color:** Choose any color for widget text.
* **Text Align:** Right
* **Text Transform:** None
* **Text Decoration:** None
* **Line Height:** 32px
* **Letter Spacing:** Default (0)

### Widget Content

Customize the appearance of the actual widget content (e.g., list items, descriptions):

* Same controls as “Widget Headings” — choose font family, size, color, alignment, and spacing.

***

### How Font Selection Works (Using Kirki Typography Control)

When you open the Typography control in the Customizer:

1. **Font Family Dropdown** – Lists available fonts, including Google Fonts and system fonts.
2. **Live Preview** – As you change values (font family, size, etc.), you can see updates in real time.
3. **Performance Optimization** – Only activated fonts are loaded on your site, ensuring speed and efficiency.
4. **Single Panel Experience** – Kirki groups all typography options (font, size, spacing, color, alignment) into one clean control view .

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2F24aPi2k3eXhXuNOgSOtO%2F41.png?alt=media&amp;token=87c227ae-6a81-4b39-b4c7-6192ee4fc301" alt=""><figcaption></figcaption></figure>


# Footer Widgets

Use these settings to control the appearance of your footer widget text, including both the widget headings and content.

**Navigation:** *Customizer → Typography → Footer Widgets*

### Widget Headings

Style the titles of footer widgets (e.g., "Recent Posts", "Contact Info").

* **Font Family** – Choose from the available fonts.
* **Font Variant** – Select weight/style like regular, bold, italic.
* **Font Size** – Set in px, em, or rem.
* **Font Color** – Pick the color via color picker.
* **Text Align** – Align heading text (e.g., Left, Center, Right).
* **Text Transform** – Choose uppercase, lowercase, capitalize, or none.
* **Text Decoration** – Add underline or similar styling (if desired).
* **Line Height** – Increase spacing between lines for readability.
* **Letter Spacing** – Control space between each character.

***

### Widget Content

Customize the appearance of the actual widget content (e.g., list items, descriptions):

* Same controls as “Widget Headings” — choose font family, size, color, alignment, and spacing.

***

### How Font Selection Works&#x20;

When you open the Typography control in the Customizer:

1. **Font Family Dropdown** – Lists available fonts, including Google Fonts and system fonts.
2. **Live Preview** – As you change values (font family, size, etc.), you can see updates in real time.
3. **Performance Optimization** – Only activated fonts are loaded on your site, ensuring speed and efficiency.
4. **Single Panel Experience** – Kirki groups all typography options (font, size, spacing, color, alignment) into one clean control view.&#x20;

***

#### Tip

To keep your footer looking cohesive and clean:

* Use contrasting font sizes—larger for headings, smaller for content.
* Choose consistent colors that complement your site’s overall palette.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FwvfVNqQfqjJANN30TgIO%2F42.png?alt=media&amp;token=985dcbc3-d415-4dc3-b135-60eb79399eff" alt=""><figcaption></figcaption></figure>


# Paragraphs

This section lets you style the paragraph text used across your website. Adjusting these settings ensures your site’s content is clear and easy to read.

**Navigation:** *Customizer → Typography → Paragraphs*

### Paragraph Font Settings

* **Font Family** – Default: *Noto Nastaleeq*
* **Font Weight / Variant** – Default: *400 (Regular)*
* **Font Size** – Default: *16px*
* **Line Height** – Default: *40px*
* **Font Color** – Default: *#555*

***

### How to Change

1. Go to **Customizer → Typography → Paragraphs**.
2. Use the **Font Family dropdown** to select a font. (Google Fonts and system fonts are supported.)
3. Adjust the **Font Weight** (Regular, Bold, etc.) to control thickness.
4. Set the **Font Size** for readability.
5. Choose a **Font Color** using the color picker.
6. Adjust the **Line Height** for better spacing between lines.
7. Check the **Live Preview** on the right side before publishing.

***

💡 **Tip:** Keep paragraphs in a simple, easy-to-read font to maintain readability, especially for long articles.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fm8051NGlPEWxzI3uz1le%2F43.png?alt=media&amp;token=72659904-4aa9-4de4-a4da-61cd1eb2d9fd" alt=""><figcaption></figcaption></figure>


# Menu

This section allows you to customize the top navigation menu text style, ensuring your site’s main links are both clear and visually consistent with your theme design.

**Navigation:** *Customizer → Typography → Menu*

### Main Items

* **Font Family** – Choose the font for your top menu items.
* **Font Weight / Variant** – Select thickness or style (e.g., Regular, Bold, Italic).
* **Font Size** – Define the size of menu text for visibility.
* **Font Color** – Pick the color for your menu items.
* **Text Transform** – Change casing (uppercase, lowercase, capitalize).
* **Text Decoration** – Add underline or other decorations.
* **Line Height** – Adjust vertical spacing for better alignment.
* **Letter Spacing** – Control the spacing between menu letters.

***

### How to Change

1. Go to **Customizer → Typography → Menu**.
2. Open the **Font Family dropdown** and select your preferred font.
3. Adjust the **Font Weight** to set menu text thickness.
4. Set the **Font Size** to make menu items clear and readable.
5. Use the **Color Picker** to select a text color.
6. Apply **Text Transform** (uppercase/lowercase/capitalize) if needed.
7. Adjust **Letter Spacing** and **Line Height** for alignment and spacing.
8. Preview changes in real time and click **Publish** to save.

***

💡 **Tip:** Use a bold font for the menu to make navigation stand out, but avoid very large sizes that could break the layout.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FAMaqkmp3cYsTcsxHJFis%2F44.png?alt=media&amp;token=e17228ef-d7cb-40f8-ad1d-be46a28658f5" alt=""><figcaption></figcaption></figure>


# Newsticker

This section allows you to style the News Ticker text, including the label (e.g., “Important News”) and the ticker body (the scrolling news items).

**Navigation:** *Customizer → Typography → News Ticker*

### News Ticker Label

* **Font Family** – *Lateef*
* **Font Variant** – Regular
* **Font Size** – 28px
* **Font Color** – Choose your label text color
* **Text Align** – Right
* **Text Transform** – None
* **Text Decoration** – None
* **Line Height** – 24px
* **Letter Spacing** – 0

***

### News Ticker Body

* **Font Family** – *Noto Nastaleeq*
* **Font Variant** – Regular
* **Font Size** – 14px
* **Font Color** – Choose your ticker body text color
* **Text Align** – Right
* **Text Transform** – None
* **Text Decoration** – None
* **Line Height** – 32px
* **Letter Spacing** – Default (0)

***

### How to Change

1. Navigate to **Customizer → Typography → News Ticker**.
2. Under **News Ticker Label**, select a **Font Family**, adjust size, and change color for the ticker heading/label.
3. Under **News Ticker Body**, select a **Font Family**, size, and color for the scrolling ticker text.
4. Use **Text Transform** (uppercase, lowercase, capitalize) if needed.
5. Adjust **Letter Spacing** and **Line Height** for alignment and readability.
6. Preview changes live in the Customizer.
7. Click **Publish** to save your typography settings.

***

💡 **Tip:** Use a **distinctive font for the label** so it stands out, and a **clear, readable font for the body** to ensure news updates are easy to follow.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FQztnpAy1Ga7RL3f2bBzJ%2F45%5D.png?alt=media&amp;token=a5708b2f-69c8-4592-9947-a094cbd9fe8f" alt=""><figcaption></figcaption></figure>


# Archive

These settings let you control how archive pages (categories, tags, date archives, etc.) display their text styling. You can separately style the post headings, excerpts, and post meta information.

**Navigation:** *Customizer → Typography → Archives*

### Heading Text

Controls the font styling for post titles in archive pages.

* **Font Family** – *Noto Nastaleeq*
* **Font Variant** – 700 (Bold)
* **Font Size** – 16px
* **Font Color** – Choose a color for archive post headings
* **Text Align** – Right
* **Text Transform** – None
* **Text Decoration** – None
* **Line Height** – 40px
* **Letter Spacing** – 0

***

### Excerpt Text

Controls the font styling for post excerpts shown under archive titles.

* **Font Family** – *Noto Nastaleeq*
* **Font Variant** – Regular
* **Font Size** – 12px
* **Font Color** – Choose a color for excerpt text
* **Text Align** – Right
* **Text Transform** – None
* **Text Decoration** – None
* **Line Height** – 30px
* **Letter Spacing** – 0

***

### Post Meta

Controls the styling for **meta information** (author, date, comments, etc.) displayed in archives.

* **Font Family** – *Noto Nastaleeq*
* **Font Variant** – Regular
* **Font Size** – 12px
* **Font Color** – Choose a color for post meta text
* **Text Align** – Right
* **Text Transform** – None
* **Text Decoration** – None
* **Line Height** – 30px
* **Letter Spacing** – Default (0)

***

### How to Change

1. Navigate to **Customizer → Typography → Archives**.
2. Under **Heading Text**, choose the font, size, and color for archive post titles.
3. Under **Excerpt Text**, adjust the font styling for post summaries.
4. Under **Post Meta**, set the font for details like author, date, and comments.
5. Modify **Text Transform**, **Line Height**, and **Letter Spacing** as needed for spacing and readability.
6. Preview changes live in the Customizer.
7. Click **Publish** to save your settings.

***

💡 **Tip:**

* Use a **slightly larger, bold font** for archive headings to make them stand out.
* Keep **excerpt and meta text smaller** so they don’t overpower the titles.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fdjr2Kfa6aipFWZY7Ux1g%2F46.png?alt=media&amp;token=41fcf8dd-11db-4492-9aad-d40b4492dc75" alt=""><figcaption></figcaption></figure>


# Social Media

The Social Media section in the Customizer allows you to add your profile links and manage how sharing icons appear across your site.

By Navigating to Customizing ▸ Social Media

### Social URLs

Add links to your social media profiles. The linked icons will automatically appear in the **footer**.

* **Facebook URL** – Enter your Facebook page or profile link. *(e.g.,* [*http://www.facebook.com*](http://www.facebook.com)*)*
* **Twitter URL** – Enter your Twitter profile link. *(e.g.,* [*http://www.twitter.com*](http://www.twitter.com)*)*
* **Pinterest URL** – Enter your Pinterest profile link. *(e.g.,* [*http://www.pinterest.com*](http://www.pinterest.com)*)*
* **LinkedIn URL** – Enter your LinkedIn profile or company page. *(e.g.,* [*http://www.linkedin.com*](http://www.linkedin.com)*)*
* **Reddit URL** – Enter your Reddit profile or subreddit link. *(e.g.,* [*http://www.reddit.com*](http://www.reddit.com)*)*
* **Instagram URL** – Enter your Instagram profile link. *(e.g.,* [*http://www.instagram.com*](http://www.instagram.com)*)*
* **YouTube URL** – Enter your YouTube channel or profile link. *(e.g.,* [*http://www.youtube.com*](http://www.youtube.com)*)*

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fv2R6OxIHABUeZ7HpaD26%2F47.png?alt=media&amp;token=5d645400-bd40-4c0f-9750-b6bab59f0309" alt=""><figcaption></figcaption></figure>

***

### Sharing Settings

Manage how and where **sharing icons** appear on posts and pages.

* **Enable Sharing** – Toggle social sharing buttons on/off.
* **Select Position** – Choose where to display sharing icons: *Sidebar (Left/Right)* or *Below Featured Image*.
* **Enable Rounded Icons?** – Makes icons circular instead of square. *(Default: Square)*
* **Stick Bottom on Mobile?** – Keeps icons fixed at the bottom of the screen for mobile visitors.
* **Hover Effects** – Adds smooth hover animations to social media icons.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FCFNfksMRfcbPSi1pUAAF%2F48.png?alt=media&amp;token=091db45d-0dbc-49dd-ae8e-47b04767c8a9" alt=""><figcaption></figcaption></figure>

***

💡 **Tip:**

* Use **rounded icons** for a modern style.
* Enable **stick bottom on mobile** for better user experience on smartphones.


# Translation

Manage text translations.

By Navigating to **Customizing ▸ Translation\\**

\
**Meta Info**

* **Views – Singular** → `منظر`
* **Views – Multiple** → `مناظر`
* **Comments – Singular** → `تبصرہ`
* **Comments – Multiple** → `تبصرے`

#### Forms, Buttons & Inputs

Customize the text labels for buttons, forms, and input fields.

* **Read More Button** → `مزید پڑھیں`
* **Comment Box Notice** → `آپکا ای میل ایڈریس شائع نہیں کیا جائے گا`
* **Comment Box - Textarea Label** → `اپنا تبصرہ لکھیں`
* **Comment Box - Name Label** → `آپکا نام`
* **Comment Box - Email Label** → `آپکا ای میل ایڈریس`
* **Post Comment Button** → `تبصرہ بھیجیں`
* **Comment Navigation - Heading** → `تبصروں میں نیویگیشن`
* **Comment Navigation - Previous Button** → `گزشتہ تبصرے`
* **Comment Navigation - Next Button** → `حالیہ تبصرے`
* **Comments Closed Notice** → `تبصرے بند ہیں`
* **Search Button Label** → `تلاش کریں`
* **Search Input Placeholder** → `جو تلاش کرنا چاہ رہے ہیں یہاں لکھیں`
* **Facebook Button Label** → `فیس بک`
* **Twitter Button Label** → `ٹویٹر`
* **WhatsApp Button Label** → `واٹس ایپ`

***

#### Month Names

Translate month names for date formats used in posts and archives.

* **January** → `جنوری`
* **February** → `فروری`
* **March** → `مارچ`
* **April** → `اپریل`
* **May** → `مئی`
* **June** → `جون`
* **July** → `جولائ`
* **August** → `اگست`
* **September** → `ستمبر`
* **October** → `اکتوبر`
* **November** → `نومبر`
* **December** → `دسمبر`

***

#### Archive Templates

Control the text shown in archive and video archive headers.

* **Archive Header - Before Text** → `اس کیٹا گری میں`
* **Archive Header - After Text** → `خبریں موجود ہیں`
* **Video Archive Header - Before Text** → `اس کیٹا گری میں`
* **Video Archive Header - After Text** → `ویڈیوز موجود ہیں`

***

#### Page Templates

Translate text displayed on error and search result pages.

* **404 Page - Heading** → `ہم معذرت چاہتے ہیں`
* **404 Page - Sub Heading** →\
  `اس لنک پر کچھ بھی موجود نہیں، براہ کرم اپنے مطلوبہ لنک کی دوبارہ جانچ پڑتال کریں! یا آپ نیچے موجود لنکس کو بھی ملاحظہ فرما سکتے ہیں.`
* **Search Page - Header Text** → `آپکے مطلوبہ نتائج برائے`


# Video Modules

The Videos Module allows you to manage how videos appear on the Videos Page and on Single Video posts.

By Navigating to Customizer ▸ Videos Module

{% embed url="<https://youtu.be/Ydn9_F6no4M>" %}

#### Videos Page

**Featured Section**

* **Enable/Disable featured section** → *Enable*
* **Autoplay** → *Enable* (automatically plays the featured video)

**Video Blocks**

You can add or manage categorized video blocks that will appear on the Videos page.

* Example Blocks:
  * `ورڈپریس کے کورسز`
  * `ٹالک شوز`
  * `ٹیکنالوجی`
* **Limit** → Maximum 10 rows
* Option: **+ Add New Block**

### 🎥 Videos Page

#### How to Change

1. **Enable Featured Section**
   * Go to **Customizer ▸ Videos Module ▸ Videos Page**
   * Toggle **Featured Section** → *Enable* to show highlighted video(s).
2. **Enable Autoplay**
   * Under **Featured Section**, switch **Autoplay** → *Enable* if you want videos to play automatically.
3. **Add or Manage Video Blocks**
   * Scroll to **Video Blocks**.
   * Click **+ Add New Block**.
   * Enter the block title (e.g., `ورڈپریس کے کورسز`, `ٹالک شوز`, `ٹیکنالوجی`).
   * Repeat as needed (Max: 10 rows).

***

#### Single Video

**Featured Section**

* **Enable/Disable Related Videos section** → *Enable*

**Section Heading**

* `اس کیٹاگری سے مزید ویڈیوز`

**Videos Limit**

* Limit the number of related videos → *3*

### 📺 Single Video

#### How to Change

1. **Enable Related Videos Section**
   * Go to **Customizer ▸ Videos Module ▸ Single Video**.
   * Toggle **Featured Section** → *Enable*.
2. **Edit Section Heading**
   * In **Section Heading**, type your custom text.
   * Example: `اس کیٹاگری سے مزید ویڈیوز`.
3. **Set Limit of Related Videos**
   * Adjust **Videos Limit** to the desired number (default: *3*).

***

⚡ **Pro Tip:**\
Use **Video Blocks** to categorize your content (e.g., Tutorials, Shows, Technology). This makes the **Videos Page** more user-friendly, while the **Related Videos** setting keeps viewers engaged with similar content.


# Basic Settings

The UrduPress theme comes with custom Elementor widgets designed to make content display easier. You can enable or disable these widgets from a single panel.

### 📌 Available Widgets

* **Post Grid** – Display posts in a customizable grid layout.
* **List** – Show posts in a vertical list format.
* **Carousel** – Create a sliding carousel of posts.
* **Classic** – Display posts with classic layout styling.
* **Slider** – Add a featured slider for posts or images.
* **Urdu Heading** – Insert beautifully styled Urdu headings.
* **Popular Posts** – Highlight trending or most-viewed posts.
* **Video Grid** – Display videos in a modern grid layout.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2F8jnIWRpulPg4JHBvGy2Y%2F49.png?alt=media&amp;token=d9368f1e-c33a-4203-a51e-e331d0bed42d" alt=""><figcaption></figcaption></figure>

### ⚙️ How to Manage Widgets

1. Navigate to **Dashboard ▸ UrduPress ▸ Widgets**.
2. You’ll see a list of all available Elementor Widgets.
3. Each widget has a toggle button:
   * **ON (red)** → Widget is active and available inside Elementor editor.
   * **OFF (gray)** → Widget is disabled and will not appear in Elementor.
4. Switch the toggle according to your needs.

***

### 💡 Pro Tips

* Keep only the widgets you use frequently **enabled** to improve performance.
* All enabled widgets will appear inside Elementor editor under the **UrduPress Widgets** panel.
* You can combine these widgets with Elementor’s global settings for typography, spacing, and styling.


# Homepage Builder

The Home Page is built using a collection of Elementor widgets included with the theme. Each widget controls a specific section of the page (such as grids, sliders, headings, and post lists). By combi

{% embed url="<https://youtu.be/fsiJOKQEKtk>" %}

### Getting Started

To create your homepage:

1. Navigate to **Pages → Add New** in your WordPress dashboard.
2. Name the page (e.g., “Home”) and edit it with **Elementor**.
3. Drag and drop the provided **custom widgets** from the Elementor panel.
4. Adjust the **Content**, **Query**, and **Style** options for each widget.
5. Save and set this page as your site’s front page via\
   **Settings → Reading → Homepage Displays → A static page**.

***

### Widgets Used on the Home Page

The following custom widgets are typically used to build the homepage layout:

* **Post Grid** – Showcase posts in multiple grid layouts with overlays.
* **Post List** – Display a vertical list of recent or category-based posts.
* **Classic Posts** – Traditional post listing with layout and meta toggle options.
* **Popular Posts** – Highlight trending posts with thumbnails and meta info.
* **Videos Grid** – Display videos in a grid with play icons and meta details.
* **Slider Widget** – Create a featured content slider.
* **Urdu Heading** – Add section headings with customizable typography.

Each widget comes with its own **Content**, **Query**, and **Style** settings (see individual widget documentation for details).

***

### Styling the Homepage

* Use the **Style Tab** in each widget to adjust typography, spacing, and colors.
* Match the **color scheme** and **font styles** with your brand identity.
* Experiment with **grid vs list layouts** depending on the content type.

***

### Video Guide

🎥 A step-by-step video tutorial is available to guide you through the entire homepage creation process.\
This tutorial shows how to drag and drop widgets, configure settings, and style each section.

\[Insert Video Screenshot/Link Here]

***

### Tips

* Start with the main content blocks (sliders, grids, videos).
* Add supporting sections (post lists, popular posts) below.
* Use the **Urdu Heading widget** to separate different sections visually.
* Keep spacing consistent across all sections for a clean layout.


# Widgets


# Posts Grid

Display posts in a responsive grid with 7 preset layouts and 3 overlay styles. Control exactly which posts appear (by post type, category, tags, etc.) and fine-tune the design in the Style tab.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FhkqD1kZIuTbkRR46IrDh%2F50.png?alt=media&amp;token=0667d5ff-ea0c-4d82-af67-52735c4771f3" alt=""><figcaption></figcaption></figure>

### Add & Configure

1. Open the page with **Elementor** and search for **Post Grid**.
2. Drag it onto the canvas.
3. Use the **Content** tab to choose a **Grid Layout**, **Overlay Layout**, and what to show (heading, terms, meta, icon, full-card link).
4. Open **Query** to choose **source**, **categories/tags**, **posts per page**, **sorting**, and **offset**.
5. Use the **Style** tab to design spacing, colors, typography, overlay, badges, etc.
6. Click **Update** to save.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FV3toDRRs2R4jiouDOF3X%2F51.png?alt=media&amp;token=3361f8b3-fd6e-4a1f-8f2b-3fa1d704a3b2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FGvF2qCh3o9bBtirwrC4D%2F52.png?alt=media&amp;token=50dccb71-4526-4c30-bd7e-e9a3a76c6392" alt=""><figcaption></figcaption></figure>

### Content Tab

#### Layout

* **Grid Layout**\
  Choose one of **7** grid presets (e.g., different image/text arrangements, card styles, and gutters).
* **Overlay Layout**\
  Choose one of **3** overlay styles (e.g., *Title Only* plus two additional variants).
* **Widget Heading** *(Show/Hide)*\
  Toggle a section heading above the grid.
* **Widget Heading Text**\
  Text used when **Widget Heading** is enabled.
* **Overlay Icon** *(Show/Hide)*\
  Show an icon on image hover (e.g., play/eye icon depending on use).
* **Post Term** *(Show/Hide)*\
  Show the category/tag badge on each card.
* **Post Meta** *(Show/Hide)*\
  Show meta such as date, author, views, or comments (depending on theme settings).
* **Full Grid Link** *(On/Off)*\
  Make the **entire card** clickable (links to the single post).

> ℹ️ Available toggles/positions can vary slightly by chosen **Grid Layout** and **Overlay Layout**.

***

#### Query

Control which posts appear in the grid.

* **Source (Post Type)** – Select the type (e.g., *Posts*, *Videos* CPT).
* **Categories** – Filter by one or more categories.
* **Tags** – Filter by one or more tags.
* **Posts Per Page** – Total items to show in the grid.
* **Order By** – Date, Title, ID, Menu Order, Random, etc.
* **Order** – Ascending / Descending.
* **Offset** – Skip the first *n* posts (useful to avoid duplicates across sections).

> 💡 Combine **Categories/Tags** with **Offset** to build multi-block homepages without repeating the same posts.

***

### Style Tab

> The exact sections shown depend on the selected **Grid Layout** and **Overlay Layout**. Common controls include:

* **Grid** – Columns (desktop/tablet/mobile), row/column gap, card spacing.
* **Card** – Background, border, radius, shadow, inner padding.
* **Image** – Ratio, fit/position, hover scale, overlay color & opacity.
* **Overlay** – Background, padding, alignment; title/meta visibility & spacing.
* **Title** – Typography, color, hover color, spacing, line-clamp (if available).
* **Meta** – Typography, color, icon size/space, separator.
* **Term Badge** – Typography, text/bg color, radius, padding, position.
* **Heading (Widget Heading)** – Typography, alignment, divider/spacing.
* **Read-More / Full-Card Link** – Typography and colors (shown only when the layout uses it).

***

### Tips & Best Practices

* **Pick the layout first**, then style—some style controls are layout-specific.
* Use **Full Grid Link** for better click targets on mobile.
* Keep **meta** subtle so titles remain the main focus.
* For visual balance, set consistent **image ratios** across sections.
* Use **Offset** to prevent duplicate posts if you’re stacking multiple grids on the same page.

***

### FAQ

**Why don’t I see some Style controls?**\
Certain options only appear with specific **Grid** / **Overlay** combinations.

**Can I show only videos?**\
Yes—set **Source** to your **Videos** CPT in the **Query** panel.

**How do I change the overlay text/content?**\
Choose a different **Overlay Layout** (Content → Layout). Then style it under **Style → Overlay/Title/Meta**.


# List

The Post List Widget allows you to display your posts in a customizable list layout with options to control thumbnails, meta data, excerpts, and more.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FhgF8iN5Im8L9FhdUK5vm%2F53.png?alt=media&amp;token=ca4e9400-b1b3-4520-b1cc-f8411eeb88fa" alt=""><figcaption></figcaption></figure>

### 🔧 Content Tab

#### **Layout**

* **List Layout**
  * Choose from multiple predefined layouts (e.g., **Layout 1**, **Layout 2**).
* **Widget Heading**
  * Show/Hide the widget heading.
* **Widget Heading Text**
  * Customize the heading text (appears above the list).
* **Show Icon**
  * Toggle ON/OFF to show an icon next to the heading.
* **Post Thumbnail**
  * Enable/Disable featured image display.
* **Thumbnail Width**
  * Adjust thumbnail size using a slider (default: 120px).
* **Post Term**
  * Show/Hide post categories or tags.
* **Post Meta**
  * Show/Hide post metadata (date, author, etc.).
* **Post Excerpt**
  * Show/Hide post excerpt (summary).

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FuvkAGgb15frpInxwWS05%2F54.png?alt=media&amp;token=12b3bbef-1adc-497c-9734-784c46b84848" alt=""><figcaption></figcaption></figure>

***

#### **Query**

Control which posts are displayed:

* **Source** – Select post type (Posts, Pages, or custom post type).
* **Category** – Filter posts by category.
* **Tags** – Filter posts by tags.
* **Posts Per Page** – Limit number of posts displayed.
* **Order By** – Sort posts by Date, Title, ID, Random, etc.
* **Order** – ASC (ascending) or DESC (descending).
* **Offset** – Skip a defined number of posts before displaying.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2F3kdVRssx7kl1gtCBveRs%2F55.png?alt=media&amp;token=470c3eac-c0c2-49d1-87c9-40bf20c7f604" alt=""><figcaption></figcaption></figure>

***

### 🎨 Style Tab

You can fully customize the look & feel:

* **Heading Style** – Typography, color, spacing.
* **Thumbnail Style** – Size, border radius, hover effects.
* **Post Meta Style** – Typography, color, spacing.
* **Excerpt Style** – Typography, color, length controls.
* **Spacing** – Control margin/padding between items.

***

### ⚡ Advanced Tab

All standard Elementor advanced options:

* **Margin / Padding**
* **Motion Effects**
* **Background & Borders**
* **Custom CSS**

***

✅ **Use Case**: Displaying recent posts, category-specific lists (e.g., “Latest News”), or compact sidebar post widgets.


# Carousel

The Posts Carousel widget lets you display blog posts inside a responsive carousel with customizable layouts, typography, and query options. It supports autoplay, navigation, and styling for each elem

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FgqOOT74XqPn79zfRiUpu%2F56.png?alt=media&amp;token=050a19cd-379b-4db1-97b5-a515234c33d0" alt=""><figcaption></figcaption></figure>

### 🔹 Content Tab

#### **Layout**

* **Widget Heading**\
  Toggle to show or hide a heading above the carousel.
  * *Widget Heading Text*: Add a custom title for the carousel section.
* **Posts Per Page**\
  Set how many posts to display in the carousel.
* **Order By & Order**\
  Choose the sorting criteria (`Date`, `Title`, `Random`, etc.) and order (`ASC` / `DESC`).
* **Post Term**\
  Show or hide the category/taxonomy labels on posts.
  * *Term Style*: Customize background and text color.
* **Post Meta**\
  Toggle to show/hide meta details such as author, date, and comments.
* **Post Excerpt**\
  Toggle to show/hide excerpts with customizable length.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2F8El6UOEr6ZCVvmB5KrBY%2F57.png?alt=media&amp;token=680e688c-93b8-41c1-959c-f5cc3381a557" alt=""><figcaption></figcaption></figure>

***

#### **Carousel Settings**

* **Autoplay**
  * Enable/Disable automatic sliding.
  * *Autoplay Speed*: Define the interval between slides (e.g., 3000ms).
* **Loop**\
  Choose whether the carousel should loop infinitely.
* **Navigation**
  * Show/Hide arrows.
  * Show/Hide dots (pagination indicators).

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FoKF1sxGwfEY76i7o4OIW%2F58.png?alt=media&amp;token=49834e30-1010-4cf1-9627-ac15fbc0f4e4" alt=""><figcaption></figcaption></figure>

***

### 🔹 Query

Control which posts are displayed in the carousel.

* **Source**: Select Post Type (Posts, Pages, Custom Post Types).
* **Include/Exclude by**: Categories, Tags, or specific Post IDs.
* **Offset**: Skip a number of posts.

***

### 🔹 Style Tab

#### **Title**

* Normal & Hover Colors.
* Typography (font family, size, weight, line height, spacing).

#### **Meta**

* Customize text color, hover color, and typography for author, date, and comments.

#### **Excerpt**

* Set color and typography for the excerpt text.

#### **Category Label**

* Background color.
* Text color.
* Border radius (for pill-style labels).

#### **Navigation**

* Arrows: size, color, background.
* Dots: size, active/inactive colors.

***

✅ With these options, you can create a highly customized **posts carousel** that matches your site’s typography and design style.


# Classic

The Classic Posts widget lets you display blog posts in a traditional blog-style layout. It includes multiple layout presets, with control over post meta, terms, excerpts, and headings

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FEIGGxqmZbcW1STq74jLx%2F59.png?alt=media&amp;token=f9caca07-1e79-4cbb-ac57-e3604e3bf512" alt=""><figcaption></figcaption></figure>

### 🔹 Content Tab

#### **Layout**

* **Layout**\
  Choose from **3 predefined layouts** to display your posts in a classic style.
* **Widget Heading**
  * *Show/Hide*: Toggle the section heading on or off.
  * *Widget Heading Text*: Enter custom text for the widget heading.
* **Post Term**
  * Show or hide post categories/taxonomies above the post title.
* **Post Meta**
  * Show or hide meta information such as author, date, and comments.
* **Post Excerpt**
  * Show or hide excerpts.
  * Excerpt length is adjustable.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fvw0md1V2uVeTwuSIOEtz%2F60.png?alt=media&amp;token=ea7029f7-65d6-4588-a13a-e41e971360cb" alt=""><figcaption></figcaption></figure>

***

#### **Query**

* **Source**\
  Select the source of posts (Posts, Pages, or Custom Post Types).
* **Include/Exclude By**\
  Filter by Category, Tags, or specific Post IDs.
* **Posts Per Page**\
  Set how many posts to display at once.
* **Order By**\
  Choose how posts are sorted (`Date`, `Title`, `Random`, etc.).
* **Order**\
  Ascending (ASC) or Descending (DESC).
* **Offset**\
  Skip a defined number of posts.

***

### 🔹 Style Tab

#### **Heading**

* Typography: font family, size, weight, letter spacing.
* Text color and alignment.

#### **Post Title**

* Normal & Hover Colors.
* Typography controls (size, weight, line height, etc.).

#### **Post Term**

* Text color and background color.
* Border radius for pill-style look.
* Typography options.

#### **Post Meta**

* Control colors for icons and text.
* Hover color settings.
* Typography adjustments.

#### **Excerpt**

* Color customization.
* Typography controls (size, spacing, weight).

#### **Spacing**

* Adjust padding, margins, and column spacing between posts.

***

✅ With the **Classic Posts** widget, you can create a timeless blog layout, blending typography, meta info, and excerpts for maximum readability.


# Slider

The Posts Slider Widget lets you display your blog posts inside a responsive carousel slider. It comes with multiple layouts, overlays, and extensive query and styling controls to fully customize

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fv3vkQPqVQSHs5XgShd2c%2F61.png?alt=media&amp;token=93edc38d-2ddd-4139-90ed-5586df8d5709" alt=""><figcaption></figcaption></figure>

### Content Tab

#### Layout

* **Layouts**: Choose from **7 predefined layouts** for your slider design.
* **Overlay Styles**: Select from **3 overlay types** to control how post details appear on hover.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FxLpilytpmgbNBUxKrQaT%2F62.png?alt=media&amp;token=ad921d4c-3bec-4414-bf9b-a5d409aa3be6" alt=""><figcaption></figcaption></figure>

#### Query

Control which posts are displayed inside the slider.

* **Source**: Select the post type (e.g., Posts, Pages, or a custom post type).
* **Categories**: Filter posts by category.
* **Tags**: Filter posts by tag.
* **Posts Per Page**: Set the number of posts to show.
* **Order By**: Choose sorting (Date, Title, ID, Random, etc.).
* **Order**: Ascending or Descending order.
* **Offset**: Skip a given number of posts from the beginning.

#### Slider Settings

* **Autoplay**: Enable/disable auto-sliding.
* **Autoplay Speed**: Set the speed (in milliseconds).
* **Navigation Arrows**: Show or hide previous/next arrows.
* **Dots/Pagination**: Show or hide pagination dots.
* **Loop**: Enable infinite scrolling of slides.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2Fp2SfVhiLqBJDrn9OZlTB%2F63.png?alt=media&amp;token=ea4917a2-9ae5-458f-837a-fe4bd571db6b" alt=""><figcaption></figcaption></figure>

***

### Style Tab

#### Slider Items

* **Background**: Set background color or image for each post item.
* **Box Shadow**: Apply shadow styling for depth.
* **Border & Radius**: Add border styles and adjust corner radius.
* **Spacing**: Control padding and margins around slider items.

#### Post Title

* **Typography**: Font family, size, weight, transform.
* **Color**: Normal & hover states.
* **Spacing**: Margin/padding for titles.

#### Post Meta (Author, Date, Comments)

* **Typography**: Customize meta text styling.
* **Color**: Normal & hover states.
* **Spacing**: Adjust spacing between meta items.

#### Post Excerpt

* **Enable/Disable**: Show or hide excerpts.
* **Excerpt Length**: Control the number of words shown.
* **Typography**: Font family, size, weight.
* **Color**: Normal state.

#### Overlay

* **Overlay Background**: Color & opacity controls.
* **Hover Effects**: Fade, zoom, or custom transitions.


# Urdu Heading

The Urdu Heading widget allows you to display section headings in Urdu with optional icons. It includes both functional settings and full style customization.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FxTSzA4TcNtdqsOxMcR4A%2F64.png?alt=media&amp;token=c58c267e-b452-4085-b182-cc93740465b2" alt=""><figcaption></figcaption></figure>

### Content Tab

#### **Settings**

* **Widget Heading** – Enter the heading text in Urdu.
* **Show Icon** – Toggle ON/OFF to display an icon beside the heading.
* **Icon** – Choose an icon from the icon library to display with the heading.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FjIoi0GHjOEns1MuswX3y%2F65.png?alt=media&amp;token=5678a897-36ab-4ea7-b688-ae7b2d385aee" alt=""><figcaption></figcaption></figure>

***

### Style Tab

#### **Typography**

* **Font Family** – Select a font family for the Urdu heading.
* **Typography (without Family)** – Adjust typography options such as size, weight, transform, decoration, line height, and letter spacing.

#### **Colors & Background**

* **Widget Head Background** – Set a background color for the heading section.
* **Widget Head Text Color** – Choose the color of the heading text.
* **Icon Color** – Select a color for the icon.

#### **Design Options**

* **Border Radius** – Adjust the border radius of the heading background for rounded or sharp edges.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FIcBrrcX9lmPTCmIlb1lI%2F66.png?alt=media&amp;token=fee90f47-0407-4998-aa60-428c3b2dcc46" alt=""><figcaption></figcaption></figure>

***

⚡ *Use the Urdu Heading widget to create section titles with strong visual identity, perfectly styled for Urdu typography.*


# Popular Posts

The Popular Posts Widget allows you to display your most popular posts in a customizable list layout. You can adjust the number of posts, show/hide elements like thumbnails, meta, and excerpts

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FDn3EHG8kPP4VVtVIjeKk%2F67.png?alt=media&amp;token=d5440f67-84ab-4763-9f7e-93633a27419e" alt=""><figcaption></figcaption></figure>

### Content Tab

#### **Layout**

* **List Layout** – Displays posts in a vertical list.
* **Layout Style**
  * *Layout 1* (default).

#### **Posts Limit**

* Define the number of posts to display.
* **Default:** 5

#### **Widget Heading**

* **Widget Heading Text** – Add a custom heading for the widget.
* Example: *پوسٹ لسٹ*

#### **Show Icon**

* Toggle to enable/disable a small icon in the widget heading.

#### **Post Thumbnail**

* Enable/Disable thumbnail display.
* **Thumbnail Width** – Set width for the post thumbnail (Default: 120px).

#### **Post Meta**

* Show/Hide post metadata (date, author, views, etc.).

#### **Post Excerpt**

* Toggle to display or hide post excerpt.

#### **Views Count**

* Toggle to display the number of views for each post.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FEefoawQ3WmAYmsN1hN0g%2F68.png?alt=media&amp;token=6f570e99-3875-4ffd-9975-f551021002c9" alt=""><figcaption></figcaption></figure>

***

### Style Tab

#### **Thumbnails**

* Adjust **Thumbnail Width** (default: 120px).

#### **Typography**

* **Items Spacing** – Control spacing between post items.
  * Default: 15px

#### **Widget Head**

* **Font Family** – Select the font (Default: *Markazi Text*).
* **Typography** – Adjust size, weight, transform, and spacing.
* **Widget Head Background** – Set a background color.
* **Widget Head Text Color** – Customize text color.
* **Icon Color** – Set color for the heading icon.
* **Border Radius** – Round the corners of the widget head background.

#### **Post Content**

* **Post Title Color** – Default color of post titles.
* **Post Title Hover Color** – Title color on hover.
* **Post Meta Color** – Color for meta text.
* **Text Alignment** – Align content (Left, Center, Right).
* **Font Family** – Default: *Noto Nastaleeq*.

#### **Typography Controls**

* **Post Title** – Customize typography (font size, weight, line height, etc.).
* **Post Excerpt** – Typography settings for excerpt text.
* **Text Shadow** – Apply shadow effect to text.

***

### Advanced Tab

* Standard Elementor advanced options like **margin, padding, background, motion effects, and responsive settings**.


# Video Grid

The Videos Grid Widget allows you to showcase videos in a grid-based layout with metadata, play icon, and duration display. It is ideal for creating engaging video archive sections.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FuCrNm28L9buuxmdLlyl6%2F69.png?alt=media&amp;token=78c8e250-b52d-4511-ae1a-51a952452248" alt=""><figcaption></figcaption></figure>

### Content Tab

#### **Layout**

* **Grid Layout** – Displays videos in a responsive grid format.
* **Layout Style**
  * *Layout 1* (default).

#### **Widget Heading**

* **Widget Heading Text** – Add a custom heading for the widget.
* Example: *کیٹاگری کا نام*

#### **Video Meta**

* Toggle to show or hide video metadata (category, date, etc.).

#### **Play Icon**

* Enable/Disable the play button overlay on video thumbnails.

#### **Video Time**

* Toggle to display video duration over the thumbnail.

<figure><img src="https://1348100388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5PmCtqJGWfXR9cDabsKg%2Fuploads%2FWhAu2a4UdIHOU9O1q49g%2F70.png?alt=media&amp;token=c7bb63f0-9482-414e-9f41-eaf375d8b9e2" alt=""><figcaption></figcaption></figure>

***

### Query Section

#### **Limit**

* Set the maximum number of videos to display.
* **Default:** 4

#### **Category**

* Select the video category to filter displayed items.

***

### Style Tab

#### **Typography**

* **Widget Head**
  * **Font Family** – Select a font for the heading (*Default: Markazi Text*).
  * **Typography** – Adjust font size, weight, line height, and letter spacing.
* **Video Titles, Meta, and Duration**
  * Each can be styled individually in terms of typography, color, and alignment.

***

### Advanced Tab

* Standard Elementor advanced options: **margin, padding, background, border, motion effects, responsive settings**, etc.


# Installation

Urdu Paper is an elegant and fully responsive WordPress news and magazine theme designed especially for Urdu publishers. It offers a clean layout inspired by traditional Urdu newspapers, complete with

#### Prerequisites&#x20;

* WordPress 5.2 or higher
* PHP 7.1 or higher
* MySQL 5.6 or higher
* Kirki Customizer Framework plugin

#### Installation

1. Navigate to **Appearance > Themes** tabs in your WordPress Admin Dashboard
2. Click on **Add New Theme** button on upper-left section \
   ![](https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FeyQfjSNi4Zzbr69XLIiO%2Fimage.png?alt=media\&token=162ccd40-e198-463d-9a8a-e22829e10552)
3. Click on the Upload Theme button\
   &#x20;![](https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2Fy2FoPBkhWYuXHxo4KZ14%2Fimage.png?alt=media\&token=7a534802-e3ea-4c01-8074-9c49a9aa56bf)
4. Now Drag or Choose the pinblog.zip file from your computer (that you have downloaded from your account on [StyloThemes](https://stylothemes.com/my-account))<br>

   <figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FwenybHXKvJkXnQQRfhF2%2Fimage.png?alt=media&amp;token=fb364851-c313-49d5-b47b-f44ba42eff6f" alt=""><figcaption></figcaption></figure>

> NOTE: If you are facing trouble while installing a theme from your WordPress dashboard, it is most likely due to a resource limit at your web hosting. In this case, there are 2 options for you.

1. Install theme from cPanel / File Manager
2. Ask your web hosting provider to change the following settings for your account:
   * max\_upload\_limit = 32M
   * max\_execution\_time = 300
   * max\_post\_size = 32M

#### Activate Theme

After successful installation, Activate the theme.&#x20;

#### Required Plugins

This theme requires several plugins to be installed and activated. Some of them are required and some are recommended. You may ignore the recommended plugins but the required plugins must be installed and activated.&#x20;

Click on Begin installing plugins link in the notice

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FZoOk6IQdXkqPKckF3RgL%2F1.png?alt=media&amp;token=ccc52bd2-5848-44f3-8d08-432ecc146a5e" alt=""><figcaption></figcaption></figure>

Check all the plugins and select the Install option from the **Bulk Actions** dropdown

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FzReyV45agQmd0ltbQF9c%2F2.png?alt=media&amp;token=261ace63-177b-410b-a40c-72202110a87d" alt=""><figcaption></figcaption></figure>

After the plugins are installed, make sure they are activated by navigating to the Plugins tab. Activate them if they are not activated.&#x20;

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FIhHb5dGc2vG3MkyN5FDV%2F3.png?alt=media&amp;token=726afa31-5d8c-4388-8f20-d8a466ddb6e2" alt=""><figcaption></figcaption></figure>


# License Activation

To unlock the full potential of the theme, you must activate your license key. Follow these steps to complete the activation process.

#### License Details

Your license key information is available in the License Keys tab on the website

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FEHDx3ohjfo0zAw1GEHs7%2Fimage.png?alt=media&amp;token=1d9a529f-de74-408d-a944-bd970360f443" alt=""><figcaption></figcaption></figure>

#### How to Activate

To activate the license key, first, make sure that you have installed and activated the StyloCore plugin

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FMpWjPctBToNDTOoL8YTj%2Fimage.png?alt=media&amp;token=37fd6401-7eb9-4ef0-8d10-c78f6b250c15" alt=""><figcaption></figcaption></figure>

Now, you will see a new tab on top of your WordPress admin dashboard. Click on this tab.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FFlwtn3UlWy4lYPxdkncg%2Fimage.png?alt=media&amp;token=d16c9ea9-1759-4044-99fd-938c9c3ae50b" alt=""><figcaption></figcaption></figure>

Now in the next screen, you need to provide the license key information along with your Order ID and Account Email (on our website)

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2F5gkbdDCtWpbjtm3wPerx%2Fimage.png?alt=media&amp;token=8d637500-fb1b-4401-b748-41240ef38c75" alt=""><figcaption></figcaption></figure>

Add the required information, and make sure there are no spaces or extra characters. After adding information in the input boxes, click on the **Save Settings** button.&#x20;

{% hint style="warning" %}
You need to save the settings before attempting to activate the license key.
{% endhint %}

After saving the settings, click on the **Activate License** button. Your license key will be activated in a few seconds.&#x20;

{% hint style="danger" %}
If the license key is not being activated:

* First, make sure that your server is not blocking outgoing requests to our server (stylothemes.com)
* Check if any cache or security plugins are blocking the Ajax Call.
* Disable non-theme-related plugins one by one to check if any third-party plugin is causing conflicts with the theme.

{% endhint %}

Once the license key is successfully activated, you will the updated license count on the right side, and your license data will be hidden in the admin screen.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FlLdwwmMt1xCXo7GfAmI6%2Fimage.png?alt=media&amp;token=02cfc5fd-aefb-4474-8845-0eef478bc23a" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
If the license count or other details are not updating correctly, you can safely ignore it. This may occur due to technical reasons but does not impact the theme's functionality.
{% endhint %}


# Demo Import

This theme comes with a fully featured demo that you can import with just one click. Follow the steps below to import the demo data.

#### Demo Plugin

First, make sure that the One Click Demo Import plugin is installed and Activated

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FuNEdHNfpFULmJjRqmhww%2F4.png?alt=media&amp;token=3a82e0ac-b973-49be-9def-e33a371fd476" alt=""><figcaption></figcaption></figure>

#### Demo Import

The link is available under the **Appearance** tab

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FVtrKwXWtHJiJtAKqarJ6%2F5.png?alt=media&amp;token=4361449b-130f-434d-9818-6c7a3ee0b071" alt=""><figcaption></figcaption></figure>

On this page, click on Import Demo Data on the bottom-left section of the screen.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FSej0wa6oYNNzyDe0LxqC%2F6.png?alt=media&amp;token=f9437e07-0893-4a94-a233-f95ab31acc70" alt=""><figcaption></figcaption></figure>

On the next screen, click on **Continue & Import** button

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FfN36HAsQIUBJTkL2VvYR%2F7.png?alt=media&amp;token=621fef12-9b19-47ae-9809-ae7fba267fce" alt=""><figcaption></figcaption></figure>

&#x20;This will start the demo import process and it may take a few minutes to fully import the demo data. The speed varies on different servers. <br>

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FVdx06f6zkWKF8LsuxHYP%2Fimage.png?alt=media&amp;token=56752b57-33bb-45b1-8168-1862b55ebe6a" alt=""><figcaption></figcaption></figure>

After a few minutes, your demo will be imported. Please do not refresh or c lose the tab or the process will stop.&#x20;

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FoAdj8qEpzEpdPpy2z5zi%2Fimage.png?alt=media&amp;token=e89c0af2-b4a6-400f-b568-c5a06cda50a5" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
If the demo content import process is stuck, incomplete, or not working correctly, it likely means your hosting's PHP.ini limits are too low for the WordPress Importer. This prevents the demo data from being imported properly.

To resolve this, contact your web hosting support and request an increase in the following PHP.ini limits:

* **max\_execution\_time = 300** (600 recommended)
* **memory\_limit = 128M** (256M recommended)
* **post\_max\_size = 32M**
* **upload\_max\_filesize = 32M**
* **max\_input\_vars = 2000**
  {% endhint %}


# Widgets & Sidebars

### Requirements

Make sure that you have installed and activated the Classic Widgets plugin if you want to use the built-in theme widgets

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FU60uyG7o7e0Zi0e4eZLQ%2Fimage.png?alt=media&amp;token=f63956cc-da2f-4bba-a14a-5177a7686b82" alt=""><figcaption></figcaption></figure>

### Widget Areas

To manage widgets and sidebars, navigate to **Appearance > Widgets**

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FJ5kI3VawlnLFWiYXtH0y%2Fimage.png?alt=media&amp;token=ef09edb0-a0c7-4fd4-84c3-dbe8a8f48f77" alt=""><figcaption></figcaption></figure>

This theme has 9 widget areas, you can drag any widget from the left side into any widget area.&#x20;

Two custom widgets come with this theme (may increase with updates)

* PB - Latest Posts
* PB - Popular Posts

### Advertisements

To add Google AdSense or other advertisement codes into any widget area or sidebar. Use the Custom HTML widget and drag it into the sidebar or click on it to expand the sidebar locations and choose from below

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FV9mRHNWmtTSW7Rd4QC8r%2Fimage.png?alt=media&amp;token=d20e5b2c-287d-44d0-8b59-9ada9d8f21de" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2Fa5hWnDQq58dsZ22qSgHy%2Fimage.png?alt=media&amp;token=1f03d051-119a-433c-8086-cb756123393e" alt=""><figcaption></figcaption></figure>

Add your advertisement code and click on Save&#x20;

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2F1h4Tfa0wOiEeW6CIV4kY%2Fimage.png?alt=media&amp;token=bea2b34e-e732-42b5-ab7a-b02843b16653" alt=""><figcaption></figcaption></figure>


# Navigation Menus

### Assigning Menus

Create your menu and select the location checkbox to assign the menu to that location

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FP62MpmhD5gSB9tMzNaZ0%2Fimage.png?alt=media&amp;token=c932cbcf-a4e4-4b12-a1fd-9aec5de8c224" alt=""><figcaption></figcaption></figure>

### Mega Menu

The mega menu (Topics Dropdown) in the header is pretty simple to set up.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2F8e1xCxw9qq9mRpipRubB%2Fimage.png?alt=media&amp;token=95c219be-c7bc-4fdb-9d50-a550195301a0" alt=""><figcaption></figcaption></figure>

#### Create a Menu

Create a new menu and name it anything you like. Now add links to the categories or pages from the left side.

To make it a mega menu, just move some items under parent tabs like shown below.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FnwIaVegFr2WCvyiHWixp%2Fimage.png?alt=media&amp;token=beab9fce-c86a-48bc-8407-fdc69ffa5143" alt=""><figcaption></figcaption></figure>


# E-Paper Module

### 🔑 1. Accessing the Epaper Section

1. Log in to your **WordPress Admin Panel**.
2. From the left sidebar, click on **Epaper**.
   * Here you will see a list of all your uploaded epapers.

***

### 📰 2. Adding a New Epaper

1. Click on **Add New Epaper**.
2. Enter the **Title** of your epaper.
   * Example: *The Nation – 10th December 2020*.
3. In the **Editor Section**, you can write a short description if needed (optional).

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FCPkiTzPQrvByOv2XnLtN%2F11.png?alt=media&amp;token=39331dbe-6f3d-47f6-86c1-554671bd2b38" alt=""><figcaption></figcaption></figure>

***

### 🖼️ 3. Uploading Epaper Images

* Scroll down to the **Epaper Images** section (custom meta box).
* Upload page-by-page images of your newspaper using the **Media Upload** button.
  * These images will appear on the frontend for users to browse.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2F8vYFF5PqeZCLfNvsANxH%2F12.png?alt=media&amp;token=49c30155-1b38-469f-a798-04df1f810a08" alt=""><figcaption></figcaption></figure>

***

### 📑 4. Uploading a Full PDF (Optional)

* In the **Epaper PDF Upload** field, you can upload the complete PDF version of the epaper.
* This will be available as a **Download Button** on the frontend so readers can save the full edition.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FSbgAgECHTQqOYHYCbW74%2F13.png?alt=media&amp;token=ee851a6a-bf8c-440c-b201-ed888b1ea7b3" alt=""><figcaption></figcaption></figure>

***

### 🏙️ 5. Selecting City

* On the right-hand side, you’ll see the **Cities** taxonomy box.
* Select the city (or cities) relevant to this epaper edition.
* Example: *Lahore, Karachi, Islamabad*.
* If the required city is not listed, click **Add New City** to create one.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FllaDVakewNGidwVREaYX%2F14.png?alt=media&amp;token=cde08f3e-1a87-4ccf-8b1c-fad37eeaf1a5" alt=""><figcaption></figcaption></figure>

***

### 💾 6. Publishing the Epaper

1. Once you’ve added images, PDF, and city, click **Publish**.
2. Your epaper will now be visible on the frontend under the **Epaper Section**.

***

### 🌐 7. Viewing the Epaper on the Frontend

* Visit: **yourdomain.com/epaper/**
  * This shows the **Epaper Archive Page** with all available editions.
* Example: [Epaper Archive](https://stylothemes.com/demo/urdupaper/epaper/)
* Click on any edition to open its detail page.
* Example: [Single Epaper Page](https://stylothemes.com/demo/urdupaper/epaper/thenation-10th-december-2020/)

On the single page, users can:

* Browse images (page by page).
* Download the full PDF (if uploaded).
* See the city and edition details.

***

### ✅ Tips for Best Results

* Upload **optimized images** (compressed for web) to improve loading speed.
* Always use **clear titles** with date and newspaper name for better SEO.
* Assign cities properly so users can filter epapers by location.


# General Settings

The Theme Customizer allows you to adjust your website’s layout, colors, backgrounds, and E-Paper features. To open it, go to:

* **WordPress Dashboard → Appearance → Customize**

### 🖼 Layout Settings

* **Body Layout**\
  Choose between **Boxed** or **Full Width** for your site’s main layout.

### 🎨 Color Scheme

* Select your website’s **main color scheme** using the color picker.

### 🔲 Elements Corner Rounding

* Adjust the **corner radius of elements** (like boxes and sections) using 4 range sliders.

### 🖼 Images Corner Rounding

* Control the **corner rounding of images** with 4 range sliders.

### ⬆️ Back To Top Button

* Enable or disable the **Back to Top button** at the bottom of your site.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2F84egi3ZZ4fI5na1nBuVZ%2F15.png?alt=media&amp;token=5f70b3f3-f483-43f0-8b37-a4b8a34e3f7c" alt=""><figcaption></figcaption></figure>

***

## 🎨 Body Background

You can fully customize the **body background** of your site.\
Options include:

* **Background Color**
* **Background Image** (upload/remove/change)
* **Repeat** (Repeat All, No Repeat, etc.)
* **Position** (Center, Top Left, etc.)
* **Size** (Cover, Contain, Auto)
* **Attachment** (Scroll, Fixed)

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FPRz980El6OQoUtwuRjmU%2F16.png?alt=media&amp;token=66d84994-1be4-4c43-a1da-11e8bb47c061" alt=""><figcaption></figcaption></figure>

***

## 📰 E-PAPER Settings

#### E-PAPER Button

* Show or Hide the **E-Paper button** in the site header.
* You can also change the **Button Label** (default: *E-Paper*).

#### E-PAPER Zoom Feature

* Enable or disable the **Zoom function** inside the E-Paper module.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2F4AXInKwHdVrh1LuQVpbv%2F17.png?alt=media&amp;token=0163a50a-fe0f-4de0-9ca4-98f0e6fce469" alt=""><figcaption></figcaption></figure>

***

## ✅ Tips

* Use clear, simple titles for easy navigation.
* Add screenshots after each option for better understanding.
* Keep changes saved by clicking **Publish** in the Customizer.


# Header

The Header Settings section allows you to customize your website’s logo, header layout, navigation, and news ticker. To access:

**WordPress Dashboard → Appearance → Customize → Header**

### 🖼 Website Logo

* **Desktop Logo**: Upload or remove the logo for desktop view.
* **Mobile Logo**: Upload or remove the logo for mobile view.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2F1oEZc35H2JuhrOAWmc5K%2F18.png?alt=media&amp;token=c5694c8f-4fd0-4697-a3c6-60c81a404faf" alt=""><figcaption></figcaption></figure>

***

### 🖥 Desktop Header

Manage the layout and options for your website’s desktop header.

* **Logo Width**: Adjust logo size (default: 120px, adjustable via slider).
* **Show Small Header**: Enable or disable the small header.
* **Social Icons**: Show or hide social icons in the small header.
* **News Ticker**: Turn ON/OFF the header news ticker.
* **News Ticker Position**: Choose the position (example: *Below Header*).

📸 *Add screenshot here showing Desktop Header options*

***

### 📱 Mobile Header

Manage the layout and colors for your mobile header.

* **Background Color**: Choose a background color.
* **Icons Color**: Choose a color for header icons.

📸 *Add screenshot here showing Mobile Header color pickers*

***

### 🍔 Navigation

Customize your main navigation menu settings.

* **Enable Sticky Nav**: Keep the navigation bar fixed at the top while scrolling.
* **Navigation Background**: Select background color (default: `#121212`).
* **Menu Items Hover**: Select hover background color (default: `#f4ac04`).
* **Menu Active Tab**: Select active menu tab background color (default: `#f4ac04`).
* **Menu Border**: Select color for the main menu top border (default: `#f4ac04`).
* **Menu Items Border**: Select color for menu items border.

📸 *Add screenshot here showing Navigation color settings*

***

### 📰 News Ticker

Manage the top scrolling news bar in the header.

* **Hide on Mobile**: Enable/disable ticker on mobile devices.
* **Select Category**: Choose a category for ticker posts (example: *اہم خبریں*).
* **Posts Limit**: Set number of posts to display (example: *8*).
* **Ticker Label**: Enter label text for ticker.

📸 *Add screenshot here showing News Ticker settings*

***

## ✅ Tips

* Upload logos in **transparent PNG** format for best results.
* Keep ticker posts short for smooth scrolling.
* Use consistent colors for navigation hover and active states for a clean design.


# Footer

The Footer Settings section lets you manage the layout, colors, and copyright information of your website’s footer. To access:

**WordPress Dashboard → Appearance → Customize → Footer**

### 🎨 Layout & Style

* **Widgets Text Alignment**\
  Choose how footer widget text should be aligned:
  * Left
  * Center
  * Right

📸 *Add screenshot here showing alignment options*

* **Widgets Background**\
  Select background color for footer widget area.
* **Widgets Borders**\
  Choose a border color for footer widget area.
* **Widgets Text**\
  Pick a text color for footer widgets.
* **Copyrights Background**\
  Set a background color for the copyright bar.

📸 *Add screenshot here showing footer color controls*

***

### ©️ Copyrights

* **Footer Copyrights (Enable/Disable)**\
  Turn the copyright section on or off.
* **Copyrights Text**\
  Add custom text (HTML supported if you want to add links, e.g., “© 2025 Your Website. All Rights Reserved”).

📸 *Add screenshot here showing copyright settings*

***

## ✅ Tips

* Use high contrast text and background colors for better readability.
* Keep copyright text short and professional.
* If using HTML, make sure links are styled properly.


# Homepage


# Block Settings

The Homepage Settings section allows you to manage the layout and blocks displayed on your homepage. To access:

**WordPress Dashboard → Appearance → Customize → Homepage**

### 📦 Block Settings

#### **Homepage Post Block Settings**

This section gives you full control over the order and visibility of homepage content blocks.

* **Homepage Layout Manager**\
  Use the **drag-and-drop control** to arrange the layout of your homepage.

📸 *Add screenshot here showing drag-and-drop layout manager*

***

#### 🧩 Available Blocks

You can enable, disable, or reorder the following blocks:

* **Featured Grid Block**\
  Highlight selected posts in a featured grid layout.
* **Classic Block & Sidebar**\
  Display posts in a classic list format with a sidebar.
* **Column Block & Sidebar**\
  Organize posts into columns with a sidebar.
* **Banner Ad 1**\
  Place an advertisement block in the homepage layout.
* **Carousel Slider**\
  Add a sliding carousel of posts at the top of the page.
* **Grid Row 1**\
  Display a row of posts in a grid format.
* **Banner Ad 2**\
  Add a second advertisement block.
* **Grid Row 2**\
  Another grid row layout for posts.
* **Banner Ad 3**\
  A third advertisement block.
* **Grid Row 3**\
  Final row of posts in a grid format.

📸 *Add screenshot here showing example blocks (e.g., Carousel Slider, Grid Row)*

***

## ✅ Tips

* Simply **drag and drop** blocks in the Layout Manager to change their order.
* You can **disable a block** by dragging it out of the active layout area (if supported).
* Use **Banner Ad blocks** for advertisements or promotional content.
* Keep your layout balanced — too many grids or ads may slow down page load.


# Post Block Limit


# Featured Grid


# Block Categories


# Grid Block Icons


# Carousel Slider


# Single Post


# Typography


# Font Loader


# Headings


# Paragraphs


# Menu


# News Ticker


# SEO Settings


# General


# Webmaster Tools


# Social Media


# Advanced SEO


# Labels & Texts


# Archives


# Social Media

The Social Media section in the Customizer allows you to add your profile links and manage how sharing icons appear across your site.

By Navigating to Customizing ▸ Social Media

### Social URLs

Add links to your social media profiles. The linked icons will automatically appear in the **footer**.

* **Facebook URL** – Enter your Facebook page or profile link. *(e.g.,* [*http://www.facebook.com*](http://www.facebook.com)*)*
* **Twitter URL** – Enter your Twitter profile link. *(e.g.,* [*http://www.twitter.com*](http://www.twitter.com)*)*
* **Pinterest URL** – Enter your Pinterest profile link. *(e.g.,* [*http://www.pinterest.com*](http://www.pinterest.com)*)*
* **LinkedIn URL** – Enter your LinkedIn profile or company page. *(e.g.,* [*http://www.linkedin.com*](http://www.linkedin.com)*)*
* **Reddit URL** – Enter your Reddit profile or subreddit link. *(e.g.,* [*http://www.reddit.com*](http://www.reddit.com)*)*
* **Instagram URL** – Enter your Instagram profile link. *(e.g.,* [*http://www.instagram.com*](http://www.instagram.com)*)*
* **YouTube URL** – Enter your YouTube channel or profile link. *(e.g.,* [*http://www.youtube.com*](http://www.youtube.com)*)*

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FMdtZYk2E6Yb8QcljqCP5%2F47.png?alt=media&amp;token=80b99302-26d2-463c-a709-6b622ce8bbb1" alt=""><figcaption></figcaption></figure>

***

### Sharing Settings

Manage how and where **sharing icons** appear on posts and pages.

* **Enable Sharing** – Toggle social sharing buttons on/off.
* **Select Position** – Choose where to display sharing icons: *Sidebar (Left/Right)* or *Below Featured Image*.
* **Enable Rounded Icons?** – Makes icons circular instead of square. *(Default: Square)*
* **Stick Bottom on Mobile?** – Keeps icons fixed at the bottom of the screen for mobile visitors.
* **Hover Effects** – Adds smooth hover animations to social media icons.

<figure><img src="https://3122643323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6RieybfLUNmRMQBfIOdF%2Fuploads%2FUjrMOGd2rQSYrptxjPL7%2F48.png?alt=media&amp;token=a8286286-3c9b-4be4-9749-34adec36885d" alt=""><figcaption></figcaption></figure>

***

💡 **Tip:**

* Use **rounded icons** for a modern style.
* Enable **stick bottom on mobile** for better user experience on smartphones.


# Installation

UrduNews is a premium WordPress theme built for Urdu news and blogs, offering native RTL support, elegant typography, and customizable layouts.

#### Prerequisites&#x20;

* WordPress 5.2 or higher
* PHP 7.1 or higher
* MySQL 5.6 or higher
* Kirki Customizer Framework plugin

#### Installation

1. Navigate to **Appearance > Themes** tabs in your WordPress Admin Dashboard
2. Click on **Add New Theme** button on upper-left section \
   ![](https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FQYbu2kyYAnn9CArkqylu%2Fimage.png?alt=media\&token=d22e478d-bc4c-4fc1-a089-b2ccbe98c008)
3. Click on the Upload Theme button\
   &#x20;![](https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FLtsda5apRx6cjCq8oQ1z%2Fimage.png?alt=media\&token=e16a445e-2a49-41d0-8495-1fc1147510db)
4. Now Drag or Choose the pinblog.zip file from your computer (that you have downloaded from your account on [StyloThemes](https://stylothemes.com/my-account))<br>

   <figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FqBQYROuYKLA3AaZKQU1y%2Fimage.png?alt=media&amp;token=70301f03-d710-41f0-ad7c-6314dc724e50" alt=""><figcaption></figcaption></figure>

> NOTE: If you are facing trouble while installing a theme from your WordPress dashboard, it is most likely due to a resource limit at your web hosting. In this case, there are 2 options for you.

1. Install theme from cPanel / File Manager
2. Ask your web hosting provider to change the following settings for your account:
   * max\_upload\_limit = 32M
   * max\_execution\_time = 300
   * max\_post\_size = 32M

#### Activate Theme

After successful installation, Activate the theme.&#x20;

#### Required Plugins

This theme requires several plugins to be installed and activated. Some of them are required and some are recommended. You may ignore the recommended plugins but the required plugins must be installed and activated.&#x20;

Click on Begin installing plugins link in the notice

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FyUmPrXegTK6SMQkojwRW%2FScreenshot_21.png?alt=media&amp;token=63d11518-936c-4f44-9a3f-1483e848e3e9" alt=""><figcaption></figcaption></figure>

Check all the plugins and select the Install option from the **Bulk Actions** dropdown

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FsvgVI7Afz39D9oBQwMnA%2F2.png?alt=media&amp;token=566bc8fa-1a6c-42a6-8e4f-de57995e0b44" alt=""><figcaption></figcaption></figure>

After the plugins are installed, make sure they are activated by navigating to the Plugins tab. Activate them if they are not activated.&#x20;

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2F83207MvGR7oh64omtyOQ%2FScreenshot_22.png?alt=media&amp;token=5715d227-235e-4e0e-bc23-aae08722530b" alt=""><figcaption></figcaption></figure>


# License Activation

To unlock the full potential of the theme, you must activate your license key. Follow these steps to complete the activation process.

#### License Details

Your license key information is available in the License Keys tab on the website

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2Fb0cuKNepLVKkT2dowbSW%2Fimage.png?alt=media&amp;token=a8497fef-54a4-4b67-96b1-f60ecd6f9e82" alt=""><figcaption></figcaption></figure>

#### How to Activate

To activate the license key, first, make sure that you have installed and activated the StyloCore plugin

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2Fjqf9OchmOCCUC3o1CQVP%2F4.png?alt=media&amp;token=38c6253a-7890-4e40-8b06-0d266e1f6986" alt=""><figcaption></figcaption></figure>

Now, you will see a new tab on top of your WordPress admin dashboard. Click on this tab.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FHp5de4xHVpn8bgALDGIx%2F5.png?alt=media&amp;token=9162a2fb-ccf5-4109-8552-041b03167aac" alt=""><figcaption></figcaption></figure>

Now in the next screen, you need to provide the license key information along with your Order ID and Account Email (on our website)

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FDpWr4zhFU3o9aq7pRbkD%2Fimage.png?alt=media&amp;token=0c59d07f-d764-4c91-b7f2-ac4a94eafddf" alt=""><figcaption></figcaption></figure>

Add the required information, and make sure there are no spaces or extra characters. After adding information in the input boxes, click on the **Save Settings** button.&#x20;

{% hint style="warning" %}
You need to save the settings before attempting to activate the license key.
{% endhint %}

After saving the settings, click on the **Activate License** button. Your license key will be activated in a few seconds.&#x20;

{% hint style="danger" %}
If the license key is not being activated:

* First, make sure that your server is not blocking outgoing requests to our server (stylothemes.com)
* Check if any cache or security plugins are blocking the Ajax Call.
* Disable non-theme-related plugins one by one to check if any third-party plugin is causing conflicts with the theme.

{% endhint %}

Once the license key is successfully activated, you will the updated license count on the right side, and your license data will be hidden in the admin screen.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FnlIgf6HK9qfFpKKb8Knx%2Fimage.png?alt=media&amp;token=a3819299-b8c6-4b19-b5ce-13940e5b3a9e" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
If the license count or other details are not updating correctly, you can safely ignore it. This may occur due to technical reasons but does not impact the theme's functionality.
{% endhint %}


# Demo Import

#### Demo Plugin

First, make sure that the One Click Demo Import plugin is installed and Activated

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FarSqyLea22JD9ioUgJid%2FScreenshot_23.png?alt=media&amp;token=c27a60be-3038-4184-a5e5-c02b8485c712" alt=""><figcaption></figcaption></figure>

#### Demo Import

The link is available under the **Appearance** tab

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2Fi5ItNBy7nHx39GlGY1u1%2FScreenshot_18.png?alt=media&amp;token=2ec2ad14-7c3d-4476-85fa-70bbeceaec20" alt=""><figcaption></figcaption></figure>

On this page, you can see three variants available for import. Select one of the variants and click the ***Import Demo*** button, as shown in the image below.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2F1dbGUG1kBqo6GcRKMZMV%2FScreenshot_19.png?alt=media&amp;token=75720b42-73f5-41bc-b1cb-9c1573aefc1a" alt=""><figcaption></figcaption></figure>

On the next screen, click on **Continue & Import** button

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FUA9g2K1a61f0tHVOiYWf%2FScreenshot_20.png?alt=media&amp;token=96a62b71-e078-4ba9-986c-8af15a28b183" alt=""><figcaption></figcaption></figure>

&#x20;This will start the demo import process and it may take a few minutes to fully import the demo data. The speed varies on different servers. <br>

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FuHmI39TgJxvrLLYVLHCF%2FScreenshot_21.png?alt=media&amp;token=51712f11-0005-4f40-b173-546b0e645f51" alt=""><figcaption></figcaption></figure>

After a few minutes, your demo will be imported. Please do not refresh or c lose the tab or the process will stop.&#x20;

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FFvzS1HcJaiF0BnVIX1dt%2FScreenshot_22.png?alt=media&amp;token=6824ef29-65bb-4059-a280-f39a5a88842b" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
If the demo content import process is stuck, incomplete, or not working correctly, it likely means your hosting's PHP.ini limits are too low for the WordPress Importer. This prevents the demo data from being imported properly.

To resolve this, contact your web hosting support and request an increase in the following PHP.ini limits:

* **max\_execution\_time = 300** (600 recommended)
* **memory\_limit = 128M** (256M recommended)
* **post\_max\_size = 32M**
* **upload\_max\_filesize = 32M**
* **max\_input\_vars = 2000**
  {% endhint %}


# Navigation Menus

This theme comes with pre-defined menu location that you can use to display different kinds of navigation.

### Header Menu

The theme includes a simple header menu for easy navigation.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FVmJQuJSYwCQgYZFGnKzL%2FScreenshot_23.png?alt=media&amp;token=056de9f8-c24e-4a33-9c01-a6040ab8014c" alt=""><figcaption></figcaption></figure>

### Create a Menu

Create a new menu and name it anything you like. Now add links to the categories or pages from the left side.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FC8pBbnwU8rW8UGy5yDL2%2FScreenshot_6.png?alt=media&amp;token=8478b8c0-c982-42f5-8301-19e2ecf5b603" alt=""><figcaption></figcaption></figure>

### Assigning Menus

Create your menu and select the location checkbox to assign the menu to that location


# General


# Color Scheme

Mange your website's color scheme.

Navigate to **Appearance > Customize > General > Color Scheme**

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FXmfZMd7AIfpnnk34wh8N%2FScreenshot_1.png?alt=media&amp;token=51b0aad7-5ee5-48d5-a6fa-5a4ee462272c" alt=""><figcaption></figcaption></figure>

*Default: #f0f0f0,* \
*.../themes/upress/images/bg.png*

Tailor the color scheme of your website to suit your preferences.


# Footer Settings

The Footer Settings section allows you to manage the copyright text and credits displayed at the bottom of your website.

Navigate to **Appearance > Customize > General > Footer Settings**

### Options

#### **Footer Copyright**\*

* **Default Example**:

  ```html
  Copyright © 2016-2024, UrduNews all rights reserved. Theme Designed by <a href="http://www.stylothemes.com">StyloThemes</a>
  ```
* You can replace this text with your own website copyright notice.
* Basic HTML tags are allowed (such as `<a>`, `<strong>`, `<em>`), so you can include links or styled text.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FvDXGYtOGKLBvF4roKieR%2FScreenshot_2.png?alt=media&amp;token=ccefb5ef-6283-42fd-b300-7951d40c952f" alt=""><figcaption></figcaption></figure>


# Header


# Logo Settings

The Logo Settings allow you to upload and manage your website’s branding, including desktop and mobile logos. This ensures your brand identity is consistent across all devices.

Navigate to **Appearance > Customize >** Header > Logo Settings

#### **Desktop Logo**

* Upload a valid image file (`.png`, `.jpg`, `.gif`) for your website’s main logo on desktop screens.
* You can **upload**, **replace**, or **remove** the image at any time.

#### **Mobile Logo**

* Upload a valid image file (`.png`, `.jpg`, `.gif`) for your website’s mobile layout.
* Helps keep your brand visible and properly scaled on smaller devices.
* You can **upload**, **replace**, or **remove** the image as needed.

### ✅ Tips

* Use a **transparent `.png` logo** for best results on different backgrounds.
* Keep the **mobile logo simple and smaller** for better fit and faster loading.
* Ensure both logos (desktop & mobile) are consistent in style to maintain brand identity.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2Fog0eXXN2B8lccJ5hGduU%2FScreenshot_3.png?alt=media&amp;token=54944873-3fa3-4826-8455-997cc917d377" alt=""><figcaption></figcaption></figure>


# Header Layout

The Header Layout settings let you customize the background of your website’s header area. You can choose between solid colors, background images, and different display options to match your site’s br

Navigate to **Appearance > Customize >** Footer Settings

#### **Header Background**

* Change the background of the header section using either a **solid color** or an **image**.

#### **Background Color**

* Select a color for the header background if you don’t want to use an image.

#### **Background Image**

* Upload or select a background image for your header.
* You can **upload**, **replace**, or **remove** the image at any time.

#### **Background Repeat**

* **No Repeat** → Displays the image once.
* **Repeat** → Tiles the image both horizontally and vertically.

#### **Background Position**

* Define where the background image should be aligned.
* Example: **Center Top** positions the image in the middle horizontally and at the top vertically.

#### **Background Size**

* **Cover** → Stretches the image to cover the entire header background.
* **Contain** → Scales the image to fit within the header area.
* **Auto** → Uses the image’s original size.

#### **Background Attachment**

* **Scroll** → The background moves as the user scrolls.
* **Fixed** → The background stays in place while scrolling, creating a parallax-style effect.

### ✅ Tips

* Use a **solid background color** if your logo and navigation need high contrast.
* Choose **Cover** for full-width modern header designs.
* Use **Fixed attachment** to create a professional parallax effect.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FchaM7xEV1vkGSbi1yiY4%2FScreenshot_4.png?alt=media&amp;token=07231440-6476-4e4c-a530-de2b1a819eb4" alt=""><figcaption></figcaption></figure>


# Small Header

The Small Header provides additional information at the very top of your website, such as the date or custom notices. It appears as a slim strip above the main header and can be enabled or disabled de

#### **Show Small Header**

* **Enable / Disable** the small header section at the top of the site.
* When enabled, it usually displays the date or other meta info.

#### **Date Format**

* Select the format in which you want the date to appear.
* Available option:
  * **Hijri (Islamic) Date** → Displays the Islamic calendar date in the header.

#### **Fix Islamic Date**

* Allows you to **adjust the Hijri date** by adding or subtracting days.
* Example: If your region follows a slightly different calculation, you can set **+1** or **-1** to align with the local Hijri calendar.
* Default: **0** (no adjustment).

### ✅ Tips

* Use the **Small Header** to display important information like the current date.
* If your audience is primarily Muslim, enabling **Hijri Date** provides added relevance.
* Use the **Fix Islamic Date** carefully to ensure your dates match local practices.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2Fuwqt7AdKTaHPIEA5Uz2e%2FScreenshot_5.png?alt=media&amp;token=f1e3f886-c91d-4895-a8e7-791c59b06b1b" alt=""><figcaption></figcaption></figure>


# News Ticker

The News Ticker is a scrolling bar that appears at the top of your website, typically used to display breaking news, updates, or highlights. It adds a dynamic element to the site and keeps visitors in

#### **Select Category**

* Choose the category of posts that should appear in the ticker.
* Example: If you select **"Pakistan"**, only posts from that category will scroll.
* If left blank, no posts will appear.

#### **Limit Posts**

* Define how many posts will display in the ticker at a time.
* Default: **10**

#### **Ticker Label**

* Add a custom label before the ticker (appears on the left side).
* Example: **تازہ ترین** (Latest News)
* You can replace this with any text (e.g., "Breaking News", "Hot Updates").

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FKo3cCuMmURwBzJTAyLn0%2FScreenshot_6.png?alt=media&amp;token=6231b746-b642-4e28-8beb-e44ce373aa28" alt=""><figcaption></figcaption></figure>


# Main Menu

The Main Menu is the primary navigation of your website. From here, you can customize its colors, borders, and button styling to match your brand identity.

#### **Background Color**

* Set the background color of the main menu.
* Example: Dark colors for contrast with white text, or light colors for a minimal look.

#### **Link Color**

* Controls the color of menu items (links).
* Choose a color that is readable and aligns with your website design.

#### **Link Hover/Active Color**

* Defines the color of menu items when hovered over or active (current page).
* Recommended: Use a contrasting or highlight color to show interactivity.

#### **Separator/Border**

* Manage the color of separators or borders between menu items.
* You can make it subtle (light gray) or bold depending on your design style.

#### **Search Button Background**

* Customize the background color of the search button in the menu.
* Suggested: Use a highlight color to make the search icon stand out.

### ✅ Tips

* Keep **contrast** in mind: if your background is dark, choose light link colors.
* Use the **hover/active color** to create a smooth navigation experience.
* The **search button** should be visible but not distracting — use accent colors.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FqAhkZqFmXrmiUj5dnpz4%2FScreenshot_7.png?alt=media&amp;token=6440f0ca-de4a-44b8-be27-618eee46ba95" alt=""><figcaption></figcaption></figure>


# Mobile Header

The Mobile Header controls how your website’s header appears on mobile devices. You can customize its background, button styling, and icon colors to ensure readability and a smooth mobile experience.

#### **Main Background**

* Set the main background color of the mobile header.
* Recommended: Use a solid color for better readability on small screens.

#### **Buttons Background**

* Customize the background color of mobile header buttons (like menu toggle, search, etc.).
* Tip: Use a contrasting or accent color to make buttons clearly visible.

#### **Button Icons Color**

* Define the color of icons inside the buttons (e.g., hamburger menu, search icon).
* Choose a high-contrast color so that icons remain clear against the button background.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FqdBzVnn9vE76eTR4Vnik%2FScreenshot_8.png?alt=media&amp;token=fedbbb2e-3f0e-454d-bc1b-361ac2d0e076" alt=""><figcaption></figcaption></figure>


# &#x20;Homepage Settings


# Latest Post Blocks Limit

This section lets you control how many post blocks are displayed in the Latest Posts section on your homepage.

#### **Total Number of Posts**\*

* Define the total number of posts to display in the homepage **Latest Posts Block**.
* Default: `4`
* Example: If you set this to `6`, the homepage will show the 6 most recent posts.

### ✅ Tips

* Keep the number **small (3–6)** for faster page load and a clean design.
* If you want your homepage to look like a **news portal**, you can increase the limit.
* Balance the post count with **homepage performance** — too many posts may slow loading time.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2Fz36qOBgXLuMV4JA9N4NE%2FScreenshot_9.png?alt=media&amp;token=9114e3c1-4262-42bf-93dc-71cae37ac8d4" alt=""><figcaption></figcaption></figure>


# Seprater Blocks

This section allows you to display separate category-based blocks on the homepage. These blocks highlight posts from specific categories, helping you organize content better.

#### **Number of Post Blocks**

* Choose how many post blocks you want to display in this separator section.
* Example: If you set it to `1`, only one block will appear.

#### **Select Category**

* Pick a specific category to show in this block.
* Example: `اہم خبریں` (Important News)

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FUv1e4f84zYhBIj7LAb7e%2FScreenshot_10.png?alt=media&amp;token=7c39a61d-3088-4b79-a2cf-075831a56cf1" alt=""><figcaption></figcaption></figure>


# Feature Block

The Feature Block section allows you to highlight a specific category at the top of your homepage. This ensures your most important or trending content is always visible to readers.

#### **Select Category**

* Choose the category you want to feature.
* Example: `اہم خبریں` (Important News)

#### **Enter Category Name**

* Add a custom title/label for the featured block.
* Example: `اہم خبریں`

#### **Total Number of Posts**

* Decide how many posts to display in this block.
* Example: `1`

### ✅ Tips

* Use this section to feature **Breaking News**, **Top Stories**, or any category you want to prioritize.
* Display fewer posts (like `1–3`) for a clean, focused layout.
* Combine with **Separator Blocks** and **Latest Posts Block** to create a well-structured homepage.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FC1gsmp8kSUFZig7oKSZ5%2FScreenshot_11.png?alt=media&amp;token=1cc93fa7-7c7b-438e-af47-1e804e8d085f" alt=""><figcaption></figcaption></figure>


# Picture Gallery

The Picture Gallery section allows you to display a grid of posts with images on the homepage. This is useful for showcasing photos, events, or visual stories.

#### **Enter Category Name**

* Add a custom title/label for the gallery section.
* Example: `تصاویر` (Pictures)

#### **Select Category**

* Choose the category from which posts will be pulled.
* Example: `تصاویر اور مناظر` (Pictures & Views)

#### **Total Number of Posts**

* Define how many posts to display in this gallery block.
* Example: `6`

#### **Grid Items per Row**

* Set how many images to display per row.
* Example: `3`

### ✅ Tips

* Use **high-quality images** for best results.
* Recommended to keep **3–4 items per row** for a balanced look.
* Ideal for **Photo Galleries, Lifestyle, Travel, or Event Coverage**.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FDKAZMEqQZpWScvWsMNvY%2FScreenshot_12.png?alt=media&amp;token=f87d76c3-917f-4143-914d-b73dc3704d89" alt=""><figcaption></figcaption></figure>


# Post Block 2 Category

The Post Block 2 Category section allows you to display a block of posts from a specific category, positioned below Post Block 1 on the homepage.

#### **Enter Category Name**

* Add a custom title/label for this block.
* Example: `کاروباری دنیا سے` (From the Business World)

#### **Select Category**

* Choose the category from which posts will be displayed.
* Example: `کاروبار` (Business)

#### **Total Number of Posts**

* Define how many posts to display in this block.
* Example: `5`

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FAB9bS5Co9L5M8HYftofK%2FScreenshot_13.png?alt=media&amp;token=4b7d2626-9ab8-42ee-90b8-3d9ef51734d8" alt=""><figcaption></figcaption></figure>


# Post Block 3 Category

The Post Block 3 Category section lets you showcase posts from another category on your homepage. This block appears below Post Block 2, helping you organize multiple categories in sequence.

#### **Enter Category Name**

* Add a custom title/label for this block.
* Example: `شوبز کی انڈسٹری` (Showbiz Industry)

#### **Select Category**

* Choose the category from which posts will be displayed.
* Example: `شوبز` (Showbiz)

#### **Total Number of Posts**

* Define how many posts should appear in this block.
* Example: `5`

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FRSb9YWLsU3uCn8nsMcOF%2FScreenshot_14.png?alt=media&amp;token=7485a132-b3f2-4f55-abd5-3a54218e1681" alt=""><figcaption></figcaption></figure>


# Videos Gallery

The Videos Gallery section allows you to showcase posts from a specific category in a video-focused block on the homepage. This is ideal for highlighting multimedia content.

#### **Enter Category Name**

* Add a custom title/label for the video gallery section.
* Example: `ملٹی میڈیا` (Multimedia)

#### **Select Category**

* Choose the category that contains video posts.
* Example: `Multimedia` (or any category you create for video content)

#### **Total Number of Posts**

* Set the number of posts to display in this block.
* Example: `4`

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FSlSc5MGtFyGbgWKnnWwf%2FScreenshot_15.png?alt=media&amp;token=a65fc6bf-2bfa-4cbc-8c0a-a7ab1de8e01c" alt=""><figcaption></figcaption></figure>




---

[Next Page](/llms-full.txt/1)

