# Categories

### **Introduction**

The **Category Tabs Widget** in **ModernPress** allows you to display posts dynamically based on selected categories. Users can easily filter posts by clicking on category tabs, making it a perfect solution for blogs, news websites, and content-heavy pages.

***

**Key Features:**

\
✅ 4 Unique Tab Styles\
✅ Post Filtering by Category (No Page Reload)\
✅ Customizable Layout & Styling\
✅ Dynamic or Manually Selected Categories\
✅ Full Typography & Color Control

***

### Adding the Category Tabs Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.
{% endstep %}

{% step %}
Edit a page with **Elementor**.
{% endstep %}

{% step %}
Search for **"Category Tabs"** in the **ModernPress Widgets** panel.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2F27Z3XfCwZzV6SjIVNXjJ%2FScreenshot%202025-02-18%20141817.png?alt=media&#x26;token=29c0f008-48cf-4a58-b694-3d9532bf17b2" alt=""><figcaption></figcaption></figure>

{% endstep %}

{% step %}
Drag and drop the widget into your section.
{% endstep %}

{% step %}
Select the categories you want to display and customize the layout.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FUJtWCJv2DucJu3MDmFHh%2FScreenshot%202025-02-18%20141826.png?alt=media&#x26;token=73926d10-26c6-43e0-a809-4ef1b6c91fac" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### **Layouts Overview**

#### **Layout 1 - Standard Tabs**

📌 Classic tabbed navigation with a clean and structured look.\
🎨 Best for **blogs, news sites, and knowledge bases**.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FqOLuGjJdukX7AxK765QM%2FScreenshot%202025-02-18%20141750.png?alt=media&#x26;token=dcd0da76-1406-42e5-ba79-2b28efe077af" alt=""><figcaption></figcaption></figure>

#### **Layout 2 - Underline Tabs**

📌 Tabs are highlighted with an animated underline on selection.\
🎨 Ideal for **modern and professional website designs**.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FuFkKd28ia6l0vGPebYwu%2FScreenshot%202025-02-18%20141717.png?alt=media&#x26;token=168a8787-bafd-46a1-b059-561e82ca09dc" alt=""><figcaption></figcaption></figure>

#### **Layout 3 - Pill-Style Tabs**

📌 Rounded, button-like tabs for a sleek and stylish appearance.\
🎨 Great for **interactive and engaging content layouts**.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FJUBxWMYTUIEhrCIl6d3p%2FScreenshot%202025-02-18%20141737.png?alt=media&#x26;token=bc148df7-eeb9-41af-856d-72ec14e1c2ec" alt=""><figcaption></figcaption></figure>

#### **Layout 4 - Boxed Tabs**

📌 Each tab is enclosed in a box for a structured, card-like effect.\
🎨 Works well for **eCommerce, portfolios, and magazine-style layouts**.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FUo4icdmenirjrfoBBSFO%2FScreenshot%202025-02-18%20141727.png?alt=media&#x26;token=a25ef9fc-9384-4adc-9ac6-15eeac82a748" alt=""><figcaption></figcaption></figure>

***

### **Customization Options**

#### **Content Settings**

📌 **Select Categories** – Choose which categories to display as tabs.\
🔄 **Filter Type** – Ajax-based filtering for smooth transitions.\
📰 **Post Display Options** – Show featured image, title, meta info, and excerpt.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FUJtWCJv2DucJu3MDmFHh%2FScreenshot%202025-02-18%20141826.png?alt=media&#x26;token=73926d10-26c6-43e0-a809-4ef1b6c91fac" alt=""><figcaption></figcaption></figure>

#### **Style Settings**

🎨 **Tab Styles** – Choose from default, underlined, pill, or boxed styles.\
📏 **Typography & Colors** – Customize text, background, and hover effects.\
🔲 **Spacing & Alignment** – Adjust tab positioning and layout gaps.\
✨ **Animation Effects** – Enable smooth transitions when switching tabs.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2F32OEeylw5I10s6bMKTSR%2FScreenshot%202025-02-18%20141841.png?alt=media&#x26;token=16ca46cb-145b-46ce-9d3e-2e2875c3cdd0" alt=""><figcaption></figcaption></figure>

#### **Advanced Features**

📱 **Responsive Adjustments** – Optimize for mobile and tablet displays.\
⚡ **Lazy Loading** – Load posts dynamically for faster performance.

***

### FAQs

<details>

<summary>Can I change the default selected tab?</summary>

Yes! In the **Content Settings**, you can choose which category tab is active by default.

</details>

<details>

<summary>Does the filtering require a page reload?</summary>

No, the widget uses **AJAX filtering**, allowing instant post updates without refreshing the page.

</details>

***

### **Need Help?**

For support, contact us at <support@modernpress.com>.
