PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.86
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.86
51.1.86 51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 All 40 releases
← All changes | includes/extensions/Docs_KB/templates/archive-docs.php +228 -130 51.1.44 → 51.1.86 View file →
@@ -1,155 +1,253 @@
1 1 <?php
2 2 /**
3 - * Docs Archive Template
3 + * Template: Docs Archive (main landing page)
4 4 *
5 + * Apple Liquid-Glass design – hero, search capsule, category grid.
6 + *
5 7 * @package King_Addons
6 8 */
7 9
8 -if (!defined('ABSPATH')) {
9 - exit;
10 -}
10 +defined('ABSPATH') || exit;
11 11
12 -$docs_kb = \King_Addons\Docs_KB::instance();
13 -$options = $docs_kb->get_options();
14 -$layout = $options['layout'] ?? 'card';
15 -$columns = $options['columns'] ?? 3;
16 -$search_enabled = !empty($options['search_enabled']);
17 -$primary_color = $options['primary_color'] ?? '#0066ff';
12 +$ext = \King_Addons\Docs_KB::instance();
13 +$options = $ext->get_options();
14 +$layout = $options['layout'] ?? 'glass-card';
15 +$cats = $ext->get_categories_with_docs(5);
16 +$mode = $options['dark_mode'] ?? 'auto';
17 +$primary = $options['primary_color'] ?? '#0071e3';
18 +$icon_color = $options['category_icon_color'] ?? $primary;
19 +$columns = (int)($options['columns'] ?? 3);
18 20
19 -// Get categories with docs
20 -$categories = $docs_kb->get_categories_with_docs();
21 -
22 21 get_header();
23 22 ?>
24 23
25 -<div class="kng-docs-page kng-docs-archive" data-layout="<?php echo esc_attr($layout); ?>">
26 - <div class="kng-docs-container">
27 -
28 - <!-- Hero Section -->
29 - <div class="kng-docs-hero">
30 - <h1 class="kng-docs-hero-title"><?php echo esc_html($options['archive_title'] ?? __('Documentation', 'king-addons')); ?></h1>
31 - <p class="kng-docs-hero-subtitle"><?php echo esc_html($options['archive_subtitle'] ?? __('Find answers to your questions', 'king-addons')); ?></p>
32 -
33 - <?php if ($search_enabled): ?>
34 - <div class="kng-docs-search">
35 - <div class="kng-docs-search-inner">
36 - <svg class="kng-docs-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
37 - <circle cx="11" cy="11" r="8"/>
38 - <path d="M21 21l-4.35-4.35"/>
24 +<div class="kng-docs-page kng-docs-layout--<?php echo esc_attr($layout); ?>"
25 + data-kng-theme-mode="<?php echo esc_attr($mode); ?>"
26 + style="--kng-docs-primary:<?php echo esc_attr($primary); ?>; --kng-docs-icon-color:<?php echo esc_attr($icon_color); ?>; --kng-docs-columns:<?php echo esc_attr($columns); ?>;">
27 +
28 + <!-- ══════════════════════════════════════
29 + HERO
30 + ══════════════════════════════════════ -->
31 + <div class="kng-docs-hero kng-docs-reveal">
32 + <span class="kng-docs-hero-eyebrow">
33 + <?php echo $ext->get_icon_svg('book-open'); ?>
34 + <?php esc_html_e('Knowledge Base', 'king-addons'); ?>
35 + </span>
36 +
37 + <h1 class="kng-docs-hero-title">
38 + <?php echo esc_html($options['archive_title'] ?? __('How can we help?', 'king-addons')); ?>
39 + </h1>
40 +
41 + <p class="kng-docs-hero-subtitle">
42 + <?php echo esc_html($options['archive_subtitle'] ?? __('Find guides, tutorials and answers to your questions.', 'king-addons')); ?>
43 + </p>
44 +
45 + <!-- Search capsule -->
46 + <div class="kng-docs-search">
47 + <div class="kng-docs-search-inner">
48 + <svg class="kng-docs-search-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
49 + <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
50 + </svg>
51 +
52 + <input type="search"
53 + class="kng-docs-search-input"
54 + placeholder="<?php echo esc_attr($options['search_placeholder'] ?? __('Search documentation…', 'king-addons')); ?>"
55 + autocomplete="off"
56 + aria-label="<?php esc_attr_e('Search articles', 'king-addons'); ?>">
57 +
58 + <span class="kng-docs-search-shortcut">
59 + <kbd>⌘</kbd><kbd>K</kbd>
60 + </span>
61 +
62 + <span class="kng-docs-search-loader">
63 + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
64 + <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
39 65 </svg>
40 - <input type="text"
41 - class="kng-docs-search-input"
42 - placeholder="<?php echo esc_attr($options['search_placeholder'] ?? __('Search documentation...', 'king-addons')); ?>"
43 - data-min-chars="<?php echo esc_attr($options['search_min_chars'] ?? 2); ?>"
44 - autocomplete="off">
45 - <div class="kng-docs-search-loader" style="display: none;">
46 - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
47 - <circle cx="12" cy="12" r="10" stroke-dasharray="60" stroke-linecap="round"/>
48 - </svg>
49 - </div>
50 - </div>
51 - <div class="kng-docs-search-results" style="display: none;"></div>
66 + </span>
67 +
68 + <div class="kng-docs-search-results" role="listbox"></div>
52 69 </div>
53 - <?php endif; ?>
54 70 </div>
71 + </div>
55 72
56 - <?php if (empty($categories)): ?>
57 - <div class="kng-docs-empty">
58 - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
59 - <path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
60 - </svg>
61 - <h3><?php esc_html_e('No documentation yet', 'king-addons'); ?></h3>
62 - <p><?php esc_html_e('Start by creating categories and adding articles.', 'king-addons'); ?></p>
63 - </div>
64 - <?php else: ?>
73 + <!-- ══════════════════════════════════════
74 + CATEGORIES GRID
75 + ══════════════════════════════════════ -->
76 + <div class="kng-docs-container">
77 + <?php if (!empty($cats)) : ?>
78 + <div class="kng-docs-categories kng-docs-reveal-stagger">
79 + <?php foreach ($cats as $cat) :
80 + $icon_name = $cat['icon'] ?? 'file-text';
81 + $cat_link = $cat['url'];
82 + $cat_desc = $cat['description'];
83 + $count = $cat['count'];
84 + ?>
65 85
66 - <!-- Categories Grid -->
67 - <div class="kng-docs-categories kng-docs-layout-<?php echo esc_attr($layout); ?>" style="--kng-docs-columns: <?php echo esc_attr($columns); ?>; --kng-docs-primary: <?php echo esc_attr($primary_color); ?>;">
68 - <?php foreach ($categories as $category): ?>
69 - <?php if ($layout === 'box'): ?>
70 - <!-- Box Layout -->
71 - <div class="kng-docs-category kng-docs-category-box">
72 - <div class="kng-docs-category-header">
73 - <?php if (!empty($options['show_category_icon']) && !empty($category['icon'])): ?>
74 - <div class="kng-docs-category-icon" style="--icon-color: <?php echo esc_attr($options['category_icon_color'] ?? $primary_color); ?>">
75 - <?php echo \King_Addons\Docs_KB::get_icon_svg($category['icon']); ?>
86 + <?php if ($layout === 'glass-card') : ?>
87 + <a href="<?php echo esc_url($cat_link); ?>"
88 + class="kng-docs-category--glass-card">
89 + <span class="kng-docs-category__icon">
90 + <?php echo $ext->get_icon_svg($icon_name); ?>
91 + </span>
92 + <h3 class="kng-docs-category__title"><?php echo esc_html($cat['name']); ?></h3>
93 + <?php if ($cat_desc) : ?>
94 + <p class="kng-docs-category__desc"><?php echo esc_html($cat_desc); ?></p>
95 + <?php endif; ?>
96 +
97 + <?php if (!empty($cat['docs'])) : ?>
98 + <ul class="kng-docs-category__articles" aria-label="<?php esc_attr_e('Articles', 'king-addons'); ?>">
99 + <?php foreach (array_slice($cat['docs'], 0, 3) as $d) : ?>
100 + <li>
101 + <span class="kng-docs-category__article-link">
102 + <svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
103 + <?php echo esc_html($d['title']); ?>
104 + </span>
105 + </li>
106 + <?php endforeach; ?>
107 + </ul>
108 + <?php endif; ?>
109 +
110 + <span class="kng-docs-category__count">
111 + <?php printf(
112 + esc_html(_n('%d article', '%d articles', $count, 'king-addons')),
113 + $count
114 + ); ?>
115 + </span>
116 + <svg class="kng-docs-category__arrow" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
117 + <path d="m9 18 6-6-6-6"/>
118 + </svg>
119 + </a>
120 +
121 + <?php elseif ($layout === 'glass-list') : ?>
122 + <a href="<?php echo esc_url($cat_link); ?>"
123 + class="kng-docs-category--glass-list">
124 + <span class="kng-docs-category__icon">
125 + <?php echo $ext->get_icon_svg($icon_name); ?>
126 + </span>
127 + <span class="kng-docs-category__content">
128 + <h3 class="kng-docs-category__title"><?php echo esc_html($cat['name']); ?></h3>
129 + <?php if ($cat_desc) : ?>
130 + <p class="kng-docs-category__desc"><?php echo esc_html($cat_desc); ?></p>
131 + <?php endif; ?>
132 +
133 + <?php if (!empty($cat['docs'])) : ?>
134 + <span class="kng-docs-category__desc" style="margin-top:10px;">
135 + <?php
136 + $titles = array_map(static fn($d) => $d['title'], array_slice($cat['docs'], 0, 3));
137 + echo esc_html(implode(' • ', $titles));
138 + ?>
139 + </span>
140 + <?php endif; ?>
141 +
142 + <span class="kng-docs-category__count">
143 + <?php printf(
144 + esc_html(_n('%d article', '%d articles', $count, 'king-addons')),
145 + $count
146 + ); ?>
147 + </span>
148 + </span>
149 + <svg class="kng-docs-category__arrow-list" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
150 + <path d="m9 18 6-6-6-6"/>
151 + </svg>
152 + </a>
153 +
154 + <?php elseif ($layout === 'glass-grid') : ?>
155 + <?php
156 + $articles = get_posts([
157 + 'post_type' => 'kng_doc',
158 + 'posts_per_page' => 5,
159 + 'tax_query' => [[
160 + 'taxonomy' => 'kng_doc_category',
161 + 'terms' => $cat['id'],
162 + ]],
163 + 'orderby' => 'menu_order',
164 + 'order' => 'ASC',
165 + ]);
166 + ?>
167 + <div class="kng-docs-category--glass-grid">
168 + <div class="kng-docs-category__header">
169 + <span class="kng-docs-category__icon">
170 + <?php echo $ext->get_icon_svg($icon_name); ?>
171 + </span>
172 + <div class="kng-docs-category__header-text">
173 + <h3 class="kng-docs-category__title"><?php echo esc_html($cat['name']); ?></h3>
174 + </div>
175 + <span class="kng-docs-category__count-badge">
176 + <?php printf(
177 + esc_html(_n('%d article', '%d articles', $count, 'king-addons')),
178 + $count
179 + ); ?>
180 + </span>
181 + </div>
182 +
183 + <?php if ($articles) : ?>
184 + <ul class="kng-docs-category__articles">
185 + <?php foreach ($articles as $art) : ?>
186 + <li>
187 + <a href="<?php echo get_permalink($art); ?>" class="kng-docs-category__article-link">
188 + <svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
189 + <?php echo esc_html($art->post_title); ?>
190 + </a>
191 + </li>
192 + <?php endforeach; wp_reset_postdata(); ?>
193 + </ul>
194 + <?php endif; ?>
195 +
196 + <?php if ($count > 5) : ?>
197 + <a href="<?php echo esc_url($cat_link); ?>" class="kng-docs-category__more">
198 + <?php esc_html_e('View all', 'king-addons'); ?>
199 + <svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
200 + </a>
201 + <?php endif; ?>
76 202 </div>
77 - <?php endif; ?>
78 - <a href="<?php echo esc_url($category['url']); ?>" class="kng-docs-category-title">
79 - <?php echo esc_html($category['name']); ?>
80 - </a>
81 - <?php if (!empty($options['show_article_count'])): ?>
82 - <span class="kng-docs-category-count"><?php echo esc_html($category['count']); ?></span>
83 - <?php endif; ?>
84 - </div>
85 - <?php if (!empty($category['description'])): ?>
86 - <p class="kng-docs-category-desc"><?php echo esc_html($category['description']); ?></p>
87 203 <?php endif; ?>
88 - <?php if (!empty($category['docs'])): ?>
89 - <ul class="kng-docs-category-list">
90 - <?php foreach (array_slice($category['docs'], 0, 5) as $doc): ?>
91 - <li>
92 - <a href="<?php echo esc_url($doc['url']); ?>">
93 - <?php echo esc_html($doc['title']); ?>
94 - </a>
95 - </li>
96 - <?php endforeach; ?>
204 +
205 + <?php endforeach; ?>
206 + </div>
207 + <?php else : ?>
208 + <?php
209 + $latest = get_posts([
210 + 'post_type' => \King_Addons\Docs_KB::POST_TYPE,
211 + 'post_status' => 'publish',
212 + 'posts_per_page' => 20,
213 + 'orderby' => 'modified',
214 + 'order' => 'DESC',
215 + ]);
216 + ?>
217 +
218 + <?php if (!empty($latest)) : ?>
219 + <div class="kng-docs-reveal">
220 + <h2 class="kng-docs-articles-title"><?php esc_html_e('Articles', 'king-addons'); ?></h2>
221 + <ul class="kng-docs-articles">
222 + <?php foreach ($latest as $p) : ?>
223 + <li>
224 + <a href="<?php echo esc_url(get_permalink($p)); ?>" class="kng-docs-article-link">
225 + <svg class="kng-docs-article-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
226 + <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/>
227 + <path d="M14 2v6h6"/>
228 + <path d="M16 13H8"/>
229 + <path d="M16 17H8"/>
230 + <path d="M10 9H8"/>
231 + </svg>
232 + <span class="kng-docs-article-info">
233 + <span class="kng-docs-article-item-title"><?php echo esc_html(get_the_title($p)); ?></span>
234 + </span>
235 + <span class="kng-docs-article-date"><?php echo esc_html(get_the_modified_date('', $p)); ?></span>
236 + <svg class="kng-docs-article-arrow" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
237 + </a>
238 + </li>
239 + <?php endforeach; wp_reset_postdata(); ?>
97 240 </ul>
98 - <?php if (count($category['docs']) > 5): ?>
99 - <a href="<?php echo esc_url($category['url']); ?>" class="kng-docs-category-more">
100 - <?php printf(esc_html__('View all %d articles', 'king-addons'), $category['count']); ?>
101 - <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
102 - </a>
103 - <?php endif; ?>
104 - <?php endif; ?>
105 241 </div>
106 -
107 - <?php elseif ($layout === 'card'): ?>
108 - <!-- Card Layout -->
109 - <a href="<?php echo esc_url($category['url']); ?>" class="kng-docs-category kng-docs-category-card">
110 - <?php if (!empty($options['show_category_icon']) && !empty($category['icon'])): ?>
111 - <div class="kng-docs-category-icon" style="--icon-color: <?php echo esc_attr($options['category_icon_color'] ?? $primary_color); ?>">
112 - <?php echo \King_Addons\Docs_KB::get_icon_svg($category['icon']); ?>
113 - </div>
114 - <?php endif; ?>
115 - <h3 class="kng-docs-category-title"><?php echo esc_html($category['name']); ?></h3>
116 - <?php if (!empty($category['description'])): ?>
117 - <p class="kng-docs-category-desc"><?php echo esc_html($category['description']); ?></p>
118 - <?php endif; ?>
119 - <?php if (!empty($options['show_article_count'])): ?>
120 - <span class="kng-docs-category-count">
121 - <?php printf(esc_html(_n('%d article', '%d articles', $category['count'], 'king-addons')), $category['count']); ?>
122 - </span>
123 - <?php endif; ?>
124 - </a>
125 -
126 - <?php else: ?>
127 - <!-- Modern Layout -->
128 - <a href="<?php echo esc_url($category['url']); ?>" class="kng-docs-category kng-docs-category-modern">
129 - <?php if (!empty($options['show_category_icon']) && !empty($category['icon'])): ?>
130 - <div class="kng-docs-category-icon" style="--icon-color: <?php echo esc_attr($options['category_icon_color'] ?? $primary_color); ?>">
131 - <?php echo \King_Addons\Docs_KB::get_icon_svg($category['icon']); ?>
132 - </div>
133 - <?php endif; ?>
134 - <div class="kng-docs-category-content">
135 - <h3 class="kng-docs-category-title"><?php echo esc_html($category['name']); ?></h3>
136 - <?php if (!empty($category['description'])): ?>
137 - <p class="kng-docs-category-desc"><?php echo esc_html($category['description']); ?></p>
138 - <?php endif; ?>
139 - <?php if (!empty($options['show_article_count'])): ?>
140 - <span class="kng-docs-category-count">
141 - <?php printf(esc_html(_n('%d article', '%d articles', $category['count'], 'king-addons')), $category['count']); ?>
142 - </span>
143 - <?php endif; ?>
144 - </div>
145 - <svg class="kng-docs-category-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
146 - </a>
147 - <?php endif; ?>
148 - <?php endforeach; ?>
149 - </div>
242 + <?php else : ?>
243 + <div class="kng-docs-empty kng-docs-reveal">
244 + <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" stroke-linecap="round" stroke-linejoin="round"/></svg>
245 + <h3><?php esc_html_e('No articles yet', 'king-addons'); ?></h3>
246 + <p><?php esc_html_e('Start by creating categories and articles in the WordPress admin.', 'king-addons'); ?></p>
247 + </div>
248 + <?php endif; ?>
150 249 <?php endif; ?>
151 -
152 250 </div>
153 251 </div>
154 252
155 253 <?php get_footer(); ?>