| 1 |
<?php |
| 2 |
if (!defined('ABSPATH')) { |
| 3 |
exit; // Exit if accessed directly |
| 4 |
} |
| 5 |
?> |
| 6 |
<style> |
| 7 |
:root { |
| 8 |
--tml-docs-bg: #f8fafc; |
| 9 |
--tml-docs-card: #ffffff; |
| 10 |
--tml-docs-text: #475569; |
| 11 |
--tml-docs-text-muted: #64748b; |
| 12 |
--tml-docs-heading: #0f172a; |
| 13 |
--tml-primary: #10b981; |
| 14 |
--tml-primary-hover: #059669; |
| 15 |
--tml-secondary: #6200ee; |
| 16 |
--tml-accent: #3b82f6; |
| 17 |
--tml-border: #e2e8f0; |
| 18 |
--tml-radius: 16px; |
| 19 |
--tml-radius-sm: 8px; |
| 20 |
--tml-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03); |
| 21 |
--tml-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); |
| 22 |
--tml-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| 23 |
--tml-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); |
| 24 |
} |
| 25 |
|
| 26 |
.tml-docs-wrap { |
| 27 |
max-width: 1280px; |
| 28 |
margin: 20px auto; |
| 29 |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
| 30 |
color: var(--tml-docs-text); |
| 31 |
padding: 0 15px; |
| 32 |
box-sizing: border-box; |
| 33 |
} |
| 34 |
|
| 35 |
.tml-docs-wrap * { |
| 36 |
box-sizing: border-box; |
| 37 |
} |
| 38 |
|
| 39 |
/* Header Styling */ |
| 40 |
.tml-docs-header { |
| 41 |
background: linear-gradient(135deg, var(--tml-secondary) 0%, var(--tml-primary) 100%); |
| 42 |
color: #fff; |
| 43 |
padding: 45px 40px; |
| 44 |
border-radius: var(--tml-radius); |
| 45 |
margin-bottom: 30px; |
| 46 |
box-shadow: var(--tml-shadow-lg); |
| 47 |
position: relative; |
| 48 |
overflow: hidden; |
| 49 |
} |
| 50 |
|
| 51 |
.tml-docs-header::before { |
| 52 |
content: ''; |
| 53 |
position: absolute; |
| 54 |
top: -50%; |
| 55 |
left: -50%; |
| 56 |
width: 200%; |
| 57 |
height: 200%; |
| 58 |
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%); |
| 59 |
transform: rotate(30deg); |
| 60 |
pointer-events: none; |
| 61 |
} |
| 62 |
|
| 63 |
.tml-docs-header h1 { |
| 64 |
margin: 0 0 12px 0; |
| 65 |
font-size: 32px; |
| 66 |
font-weight: 800; |
| 67 |
color: #fff; |
| 68 |
letter-spacing: -0.025em; |
| 69 |
} |
| 70 |
|
| 71 |
.tml-docs-header p { |
| 72 |
margin: 0; |
| 73 |
font-size: 16px; |
| 74 |
color: rgba(255, 255, 255, 0.9); |
| 75 |
max-width: 650px; |
| 76 |
line-height: 1.6; |
| 77 |
} |
| 78 |
|
| 79 |
.tml-docs-header .tml-badge { |
| 80 |
display: inline-flex; |
| 81 |
align-items: center; |
| 82 |
background: rgba(255, 255, 255, 0.18); |
| 83 |
backdrop-filter: blur(4px); |
| 84 |
color: #fff; |
| 85 |
padding: 6px 14px; |
| 86 |
border-radius: 30px; |
| 87 |
font-size: 11px; |
| 88 |
font-weight: 700; |
| 89 |
letter-spacing: 0.05em; |
| 90 |
margin-bottom: 16px; |
| 91 |
text-transform: uppercase; |
| 92 |
border: 1px solid rgba(255, 255, 255, 0.25); |
| 93 |
} |
| 94 |
|
| 95 |
/* Two-Column Layout */ |
| 96 |
.tml-docs-layout { |
| 97 |
display: grid; |
| 98 |
grid-template-columns: 280px 1fr; |
| 99 |
gap: 30px; |
| 100 |
align-items: start; |
| 101 |
} |
| 102 |
|
| 103 |
@media (max-width: 991px) { |
| 104 |
.tml-docs-layout { |
| 105 |
grid-template-columns: 1fr; |
| 106 |
} |
| 107 |
} |
| 108 |
|
| 109 |
/* Sidebar Styling */ |
| 110 |
.tml-docs-sidebar { |
| 111 |
position: sticky; |
| 112 |
top: 50px; |
| 113 |
background: var(--tml-docs-card); |
| 114 |
border: 1px solid var(--tml-border); |
| 115 |
border-radius: var(--tml-radius); |
| 116 |
padding: 24px; |
| 117 |
box-shadow: var(--tml-shadow-sm); |
| 118 |
max-height: calc(100vh - 90px); |
| 119 |
overflow-y: auto; |
| 120 |
} |
| 121 |
|
| 122 |
@media (max-width: 991px) { |
| 123 |
.tml-docs-sidebar { |
| 124 |
position: relative; |
| 125 |
top: 0; |
| 126 |
max-height: none; |
| 127 |
margin-bottom: 20px; |
| 128 |
} |
| 129 |
} |
| 130 |
|
| 131 |
/* Custom Sidebar Scrollbar */ |
| 132 |
.tml-docs-sidebar::-webkit-scrollbar { |
| 133 |
width: 6px; |
| 134 |
} |
| 135 |
.tml-docs-sidebar::-webkit-scrollbar-track { |
| 136 |
background: transparent; |
| 137 |
} |
| 138 |
.tml-docs-sidebar::-webkit-scrollbar-thumb { |
| 139 |
background: #cbd5e1; |
| 140 |
border-radius: 3px; |
| 141 |
} |
| 142 |
.tml-docs-sidebar::-webkit-scrollbar-thumb:hover { |
| 143 |
background: #94a3b8; |
| 144 |
} |
| 145 |
|
| 146 |
/* Sidebar Search Box */ |
| 147 |
.tml-search-wrapper { |
| 148 |
position: relative; |
| 149 |
margin-bottom: 20px; |
| 150 |
} |
| 151 |
|
| 152 |
.tml-search-wrapper .dashicons { |
| 153 |
position: absolute; |
| 154 |
left: 12px; |
| 155 |
top: 50%; |
| 156 |
transform: translateY(-50%); |
| 157 |
color: var(--tml-docs-text-muted); |
| 158 |
font-size: 18px; |
| 159 |
width: 18px; |
| 160 |
height: 18px; |
| 161 |
} |
| 162 |
|
| 163 |
#tml-docs-search { |
| 164 |
width: 100%; |
| 165 |
padding: 10px 12px 10px 38px; |
| 166 |
border: 1px solid var(--tml-border); |
| 167 |
border-radius: var(--tml-radius-sm); |
| 168 |
font-size: 13.5px; |
| 169 |
background: #f8fafc; |
| 170 |
color: var(--tml-docs-heading); |
| 171 |
transition: var(--tml-transition); |
| 172 |
} |
| 173 |
|
| 174 |
#tml-docs-search:focus { |
| 175 |
background: #fff; |
| 176 |
border-color: var(--tml-secondary); |
| 177 |
box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.12); |
| 178 |
outline: none; |
| 179 |
} |
| 180 |
|
| 181 |
.tml-sidebar-menu { |
| 182 |
list-style: none; |
| 183 |
padding: 0; |
| 184 |
margin: 0; |
| 185 |
} |
| 186 |
|
| 187 |
.tml-sidebar-item { |
| 188 |
margin: 0 0 6px 0; |
| 189 |
} |
| 190 |
|
| 191 |
.tml-sidebar-link { |
| 192 |
display: flex; |
| 193 |
align-items: center; |
| 194 |
gap: 12px; |
| 195 |
padding: 10px 14px; |
| 196 |
color: var(--tml-docs-text); |
| 197 |
text-decoration: none !important; |
| 198 |
border-radius: var(--tml-radius-sm); |
| 199 |
font-size: 13.5px; |
| 200 |
font-weight: 600; |
| 201 |
transition: var(--tml-transition); |
| 202 |
} |
| 203 |
|
| 204 |
.tml-sidebar-link:hover { |
| 205 |
background: #f1f5f9; |
| 206 |
color: var(--tml-secondary); |
| 207 |
} |
| 208 |
|
| 209 |
.tml-sidebar-link.active { |
| 210 |
background: linear-gradient(135deg, var(--tml-secondary) 0%, var(--tml-accent) 100%); |
| 211 |
color: #ffffff !important; |
| 212 |
box-shadow: 0 4px 12px rgba(98, 0, 238, 0.2); |
| 213 |
} |
| 214 |
|
| 215 |
.tml-sidebar-link .dashicons { |
| 216 |
font-size: 18px; |
| 217 |
width: 18px; |
| 218 |
height: 18px; |
| 219 |
color: var(--tml-docs-text-muted); |
| 220 |
transition: var(--tml-transition); |
| 221 |
} |
| 222 |
|
| 223 |
.tml-sidebar-link.active .dashicons { |
| 224 |
color: #ffffff; |
| 225 |
} |
| 226 |
|
| 227 |
/* Content Area Styling */ |
| 228 |
.tml-docs-content { |
| 229 |
min-width: 0; |
| 230 |
} |
| 231 |
|
| 232 |
.tml-docs-section { |
| 233 |
background: var(--tml-docs-card); |
| 234 |
border: 1px solid var(--tml-border); |
| 235 |
padding: 40px; |
| 236 |
margin-bottom: 30px; |
| 237 |
border-radius: var(--tml-radius); |
| 238 |
box-shadow: var(--tml-shadow-sm); |
| 239 |
transition: var(--tml-transition); |
| 240 |
scroll-margin-top: 80px; |
| 241 |
} |
| 242 |
|
| 243 |
.tml-docs-section:hover { |
| 244 |
box-shadow: var(--tml-shadow); |
| 245 |
border-color: rgba(98, 0, 238, 0.3); |
| 246 |
} |
| 247 |
|
| 248 |
.tml-docs-section h2 { |
| 249 |
font-size: 22px; |
| 250 |
font-weight: 800; |
| 251 |
color: var(--tml-docs-heading); |
| 252 |
margin: 0 0 25px 0; |
| 253 |
padding-bottom: 16px; |
| 254 |
border-bottom: 2px solid var(--tml-border); |
| 255 |
display: flex; |
| 256 |
align-items: center; |
| 257 |
gap: 12px; |
| 258 |
} |
| 259 |
|
| 260 |
.tml-docs-section h2 .dashicons { |
| 261 |
font-size: 22px; |
| 262 |
width: 22px; |
| 263 |
height: 22px; |
| 264 |
color: var(--tml-secondary); |
| 265 |
} |
| 266 |
|
| 267 |
.tml-docs-section h3 { |
| 268 |
font-size: 16px; |
| 269 |
font-weight: 700; |
| 270 |
color: var(--tml-docs-heading); |
| 271 |
margin: 32px 0 16px 0; |
| 272 |
display: flex; |
| 273 |
align-items: center; |
| 274 |
gap: 10px; |
| 275 |
} |
| 276 |
|
| 277 |
.tml-docs-section h3::before { |
| 278 |
content: ''; |
| 279 |
width: 4px; |
| 280 |
height: 16px; |
| 281 |
background: var(--tml-primary); |
| 282 |
border-radius: 2px; |
| 283 |
} |
| 284 |
|
| 285 |
.tml-docs-section p { |
| 286 |
font-size: 14.5px; |
| 287 |
line-height: 1.75; |
| 288 |
color: var(--tml-docs-text); |
| 289 |
margin: 0 0 16px 0; |
| 290 |
} |
| 291 |
|
| 292 |
.tml-docs-section ol, |
| 293 |
.tml-docs-section ul { |
| 294 |
margin: 15px 0 25px 20px; |
| 295 |
font-size: 14px; |
| 296 |
line-height: 1.75; |
| 297 |
} |
| 298 |
|
| 299 |
.tml-docs-section ol li, |
| 300 |
.tml-docs-section ul li { |
| 301 |
margin-bottom: 8px; |
| 302 |
} |
| 303 |
|
| 304 |
/* Code & Shortcode elements */ |
| 305 |
.tml-docs-section code { |
| 306 |
background: #f1f5f9; |
| 307 |
padding: 3px 8px; |
| 308 |
border-radius: 6px; |
| 309 |
font-family: 'Consolas', 'Courier New', monospace; |
| 310 |
font-size: 13px; |
| 311 |
color: var(--tml-secondary); |
| 312 |
border: 1px solid var(--tml-border); |
| 313 |
font-weight: 600; |
| 314 |
} |
| 315 |
|
| 316 |
.tml-code-block-wrapper { |
| 317 |
position: relative; |
| 318 |
background: #0f172a; |
| 319 |
border-radius: 10px; |
| 320 |
padding: 16px 20px; |
| 321 |
margin: 15px 0; |
| 322 |
border: 1px solid rgba(255,255,255,0.08); |
| 323 |
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); |
| 324 |
display: flex; |
| 325 |
justify-content: space-between; |
| 326 |
align-items: center; |
| 327 |
gap: 15px; |
| 328 |
} |
| 329 |
|
| 330 |
.tml-code-block { |
| 331 |
font-family: 'Consolas', 'Courier New', monospace; |
| 332 |
font-size: 14.5px; |
| 333 |
color: #38bdf8; |
| 334 |
margin: 0; |
| 335 |
padding: 0; |
| 336 |
overflow-x: auto; |
| 337 |
white-space: pre-wrap; |
| 338 |
word-break: break-all; |
| 339 |
font-weight: 600; |
| 340 |
flex: 1; |
| 341 |
} |
| 342 |
|
| 343 |
.tml-copy-btn { |
| 344 |
background: rgba(255, 255, 255, 0.08); |
| 345 |
border: 1px solid rgba(255, 255, 255, 0.15); |
| 346 |
color: #e2e8f0; |
| 347 |
padding: 6px 12px; |
| 348 |
border-radius: 6px; |
| 349 |
font-size: 12px; |
| 350 |
font-weight: 600; |
| 351 |
cursor: pointer; |
| 352 |
display: inline-flex; |
| 353 |
align-items: center; |
| 354 |
gap: 6px; |
| 355 |
transition: var(--tml-transition); |
| 356 |
flex-shrink: 0; |
| 357 |
} |
| 358 |
|
| 359 |
.tml-copy-btn:hover { |
| 360 |
background: rgba(255, 255, 255, 0.15); |
| 361 |
color: #fff; |
| 362 |
border-color: rgba(255, 255, 255, 0.3); |
| 363 |
} |
| 364 |
|
| 365 |
.tml-copy-btn.copied { |
| 366 |
background: #10b981; |
| 367 |
border-color: #10b981; |
| 368 |
color: #fff; |
| 369 |
} |
| 370 |
|
| 371 |
.tml-copy-btn .dashicons { |
| 372 |
font-size: 14px; |
| 373 |
width: 14px; |
| 374 |
height: 14px; |
| 375 |
} |
| 376 |
|
| 377 |
/* Alerts styling */ |
| 378 |
.tml-info, .tml-tip { |
| 379 |
padding: 18px 24px; |
| 380 |
margin: 24px 0; |
| 381 |
border-radius: var(--tml-radius-sm); |
| 382 |
font-size: 14px; |
| 383 |
line-height: 1.75; |
| 384 |
} |
| 385 |
|
| 386 |
.tml-info { |
| 387 |
background: #eff6ff; |
| 388 |
border-left: 4px solid #3b82f6; |
| 389 |
color: #1e40af; |
| 390 |
} |
| 391 |
|
| 392 |
.tml-tip { |
| 393 |
background: #fffbeb; |
| 394 |
border-left: 4px solid #f59e0b; |
| 395 |
color: #78350f; |
| 396 |
} |
| 397 |
|
| 398 |
.tml-info strong, .tml-tip strong { |
| 399 |
display: block; |
| 400 |
font-size: 13px; |
| 401 |
font-weight: 700; |
| 402 |
letter-spacing: 0.05em; |
| 403 |
text-transform: uppercase; |
| 404 |
margin-bottom: 6px; |
| 405 |
} |
| 406 |
|
| 407 |
.tml-info strong { color: #2563eb; } |
| 408 |
.tml-tip strong { color: #d97706; } |
| 409 |
|
| 410 |
/* Shortcode Guide Cards */ |
| 411 |
.tml-builders-grid { |
| 412 |
display: grid; |
| 413 |
grid-template-columns: 1fr 1fr; |
| 414 |
gap: 20px; |
| 415 |
margin: 24px 0; |
| 416 |
} |
| 417 |
|
| 418 |
@media (max-width: 768px) { |
| 419 |
.tml-builders-grid { |
| 420 |
grid-template-columns: 1fr; |
| 421 |
} |
| 422 |
} |
| 423 |
|
| 424 |
.tml-builder-card { |
| 425 |
background: #f8fafc; |
| 426 |
border: 1px solid var(--tml-border); |
| 427 |
border-radius: var(--tml-radius-sm); |
| 428 |
padding: 24px; |
| 429 |
transition: var(--tml-transition); |
| 430 |
} |
| 431 |
|
| 432 |
.tml-builder-card:hover { |
| 433 |
border-color: var(--tml-secondary); |
| 434 |
background: #fff; |
| 435 |
box-shadow: var(--tml-shadow); |
| 436 |
} |
| 437 |
|
| 438 |
.tml-builder-card h4 { |
| 439 |
margin: 0 0 12px 0; |
| 440 |
font-size: 15px; |
| 441 |
font-weight: 700; |
| 442 |
color: var(--tml-docs-heading); |
| 443 |
display: flex; |
| 444 |
align-items: center; |
| 445 |
gap: 8px; |
| 446 |
} |
| 447 |
|
| 448 |
.tml-builder-card h4 .dashicons { |
| 449 |
color: var(--tml-secondary); |
| 450 |
} |
| 451 |
|
| 452 |
/* Call to Action Buttons */ |
| 453 |
.tml-docs-cta { |
| 454 |
background: var(--tml-docs-card); |
| 455 |
border: 1px solid var(--tml-border); |
| 456 |
border-radius: var(--tml-radius); |
| 457 |
padding: 40px; |
| 458 |
display: flex; |
| 459 |
gap: 20px; |
| 460 |
justify-content: center; |
| 461 |
align-items: center; |
| 462 |
box-shadow: var(--tml-shadow-sm); |
| 463 |
margin-top: 30px; |
| 464 |
} |
| 465 |
|
| 466 |
.tml-docs-cta .button-hero { |
| 467 |
display: inline-flex !important; |
| 468 |
align-items: center !important; |
| 469 |
justify-content: center !important; |
| 470 |
gap: 8px; |
| 471 |
height: 46px !important; |
| 472 |
line-height: 44px !important; |
| 473 |
} |
| 474 |
|
| 475 |
.tml-docs-cta .button-hero .dashicons { |
| 476 |
margin: 0 !important; |
| 477 |
font-size: 18px; |
| 478 |
width: 18px; |
| 479 |
height: 18px; |
| 480 |
display: inline-flex !important; |
| 481 |
align-items: center !important; |
| 482 |
justify-content: center !important; |
| 483 |
} |
| 484 |
</style> |
| 485 |
|
| 486 |
<div class="tml-docs-wrap"> |
| 487 |
|
| 488 |
<!-- Header --> |
| 489 |
<div class="tml-docs-header"> |
| 490 |
<span class="tml-badge">� |
| 491 |
<?php esc_html_e('Documentation', 'testimonial-maker'); ?></span> |
| 492 |
<h1><?php esc_html_e('Testimonial Maker — Documentation', 'testimonial-maker'); ?></h1> |
| 493 |
<p><?php esc_html_e('Learn how to gather, manage, customize, and display client feedback and reviews on your site.', 'testimonial-maker'); ?></p> |
| 494 |
</div> |
| 495 |
|
| 496 |
<!-- Main Sidebar and Content Layout --> |
| 497 |
<div class="tml-docs-layout"> |
| 498 |
|
| 499 |
<!-- Sidebar Navigation --> |
| 500 |
<aside class="tml-docs-sidebar"> |
| 501 |
<div class="tml-search-wrapper"> |
| 502 |
<span class="dashicons dashicons-search"></span> |
| 503 |
<input type="text" id="tml-docs-search" placeholder="<?php esc_attr_e('Search docs...', 'testimonial-maker'); ?>"> |
| 504 |
</div> |
| 505 |
<ul class="tml-sidebar-menu"> |
| 506 |
<li class="tml-sidebar-item"> |
| 507 |
<a class="tml-sidebar-link active" href="#tml-start"> |
| 508 |
<span class="dashicons dashicons-format-status"></span> |
| 509 |
<?php esc_html_e('1. Adding Testimonials', 'testimonial-maker'); ?> |
| 510 |
</a> |
| 511 |
</li> |
| 512 |
<li class="tml-sidebar-item"> |
| 513 |
<a class="tml-sidebar-link" href="#tml-form-builder"> |
| 514 |
<span class="dashicons dashicons-feedback"></span> |
| 515 |
<?php esc_html_e('2. Frontend Submission Form', 'testimonial-maker'); ?> |
| 516 |
</a> |
| 517 |
</li> |
| 518 |
<li class="tml-sidebar-item"> |
| 519 |
<a class="tml-sidebar-link" href="#tml-shortcode-generator"> |
| 520 |
<span class="dashicons dashicons-layout"></span> |
| 521 |
<?php esc_html_e('3. Designing Showcase Layouts', 'testimonial-maker'); ?> |
| 522 |
</a> |
| 523 |
</li> |
| 524 |
<li class="tml-sidebar-item"> |
| 525 |
<a class="tml-sidebar-link" href="#tml-dashboard-section"> |
| 526 |
<span class="dashicons dashicons-admin-users"></span> |
| 527 |
<?php esc_html_e('4. User Dashboard', 'testimonial-maker'); ?> |
| 528 |
</a> |
| 529 |
</li> |
| 530 |
<li class="tml-sidebar-item"> |
| 531 |
<a class="tml-sidebar-link" href="#tml-page-builders"> |
| 532 |
<span class="dashicons dashicons-admin-appearance"></span> |
| 533 |
<?php esc_html_e('5. Gutenberg & Page Builders', 'testimonial-maker'); ?> |
| 534 |
</a> |
| 535 |
</li> |
| 536 |
<li class="tml-sidebar-item"> |
| 537 |
<a class="tml-sidebar-link" href="#tml-faq-section"> |
| 538 |
<span class="dashicons dashicons-editor-help"></span> |
| 539 |
<?php esc_html_e('6. FAQ & Support', 'testimonial-maker'); ?> |
| 540 |
</a> |
| 541 |
</li> |
| 542 |
</ul> |
| 543 |
</aside> |
| 544 |
|
| 545 |
<!-- Main Content Sections --> |
| 546 |
<main class="tml-docs-content"> |
| 547 |
|
| 548 |
<!-- 1. Adding Testimonials Manually --> |
| 549 |
<div class="tml-docs-section" id="tml-start"> |
| 550 |
<h2><span class="dashicons dashicons-format-status"></span> <?php esc_html_e('1. Adding Testimonials Manually', 'testimonial-maker'); ?></h2> |
| 551 |
<p><?php esc_html_e('You can manually enter and publish reviews received via email or other channels directly from the admin panel.', 'testimonial-maker'); ?></p> |
| 552 |
<ol> |
| 553 |
<li><?php esc_html_e('In your WordPress dashboard, navigate to Testimonial Maker > Add New Testimonial.', 'testimonial-maker'); ?></li> |
| 554 |
<li><?php esc_html_e('Enter the Client\'s Name as the Post Title.', 'testimonial-maker'); ?></li> |
| 555 |
<li><?php esc_html_e('Write the Client\'s Review text in the main content editor.', 'testimonial-maker'); ?></li> |
| 556 |
<li><?php esc_html_e('Under the Add Client Detail meta box at the bottom, configure the client details:', 'testimonial-maker'); ?> |
| 557 |
<ul> |
| 558 |
<li><strong><?php esc_html_e('Website Link:', 'testimonial-maker'); ?></strong> <?php esc_html_e('The reviewer\'s website URL (e.g., https://example.com).', 'testimonial-maker'); ?></li> |
| 559 |
<li><strong><?php esc_html_e('Designation:', 'testimonial-maker'); ?></strong> <?php esc_html_e('Their professional title or job role (e.g., CEO, Tech Lead).', 'testimonial-maker'); ?></li> |
| 560 |
<li><strong><?php esc_html_e('Star Rating:', 'testimonial-maker'); ?></strong> <?php esc_html_e('A score between 1 and 5 stars.', 'testimonial-maker'); ?></li> |
| 561 |
</ul> |
| 562 |
</li> |
| 563 |
<li><?php esc_html_e('Set a Featured Image on the right sidebar. This image acts as the reviewer\'s avatar.', 'testimonial-maker'); ?></li> |
| 564 |
<li><?php esc_html_e('Assign a Category (optional) to classify the review for structured filtering.', 'testimonial-maker'); ?></li> |
| 565 |
<li><?php esc_html_e('Click Publish to finalize your testimonial entry.', 'testimonial-maker'); ?></li> |
| 566 |
</ol> |
| 567 |
|
| 568 |
<div class="tml-tip"> |
| 569 |
<strong><?php esc_html_e('Tip:', 'testimonial-maker'); ?></strong> |
| 570 |
<?php esc_html_e('Categories are incredibly useful when you want to showcase reviews on specific service pages (e.g., displaying only "Web Design Reviews" on your Web Design service page).', 'testimonial-maker'); ?> |
| 571 |
</div> |
| 572 |
</div> |
| 573 |
|
| 574 |
<!-- 2. Frontend Submission Form Builder --> |
| 575 |
<div class="tml-docs-section" id="tml-form-builder"> |
| 576 |
<h2><span class="dashicons dashicons-feedback"></span> <?php esc_html_e('2. Frontend Submission Form Builder', 'testimonial-maker'); ?></h2> |
| 577 |
<p><?php esc_html_e('Testimonial Maker features a built-in Form Builder allowing you to receive testimonials from public users directly on your website.', 'testimonial-maker'); ?></p> |
| 578 |
|
| 579 |
<h3><?php esc_html_e('Setting up the Submission Form:', 'testimonial-maker'); ?></h3> |
| 580 |
<ol> |
| 581 |
<li><?php esc_html_e('Go to Testimonial Maker > Form Builder.', 'testimonial-maker'); ?></li> |
| 582 |
<li><?php esc_html_e('Click Add New Form or edit the default draft form.', 'testimonial-maker'); ?></li> |
| 583 |
<li><?php esc_html_e('Under the Form Configuration panel, select which fields (Full Name, Designation, Website URL, Avatar, Star Rating, Content) to show or hide.', 'testimonial-maker'); ?></li> |
| 584 |
<li><?php esc_html_e('Click on the Form Styles tab to customize button colors, border radius, text labels, and backgrounds.', 'testimonial-maker'); ?></li> |
| 585 |
<li><?php esc_html_e('Click Save or Update to publish your form.', 'testimonial-maker'); ?></li> |
| 586 |
</ol> |
| 587 |
|
| 588 |
<h3><?php esc_html_e('Displaying the Form on Your Website:', 'testimonial-maker'); ?></h3> |
| 589 |
<p><?php esc_html_e('To place the review submission form on a public page, copy its shortcode and paste it inside any post or page:', 'testimonial-maker'); ?></p> |
| 590 |
|
| 591 |
<div class="tml-code-block-wrapper"> |
| 592 |
<pre class="tml-code-block">[TML_FORM id="YOUR_FORM_ID"]</pre> |
| 593 |
<button class="tml-copy-btn" onclick="tmlCopyCode(this, '[TML_FORM id=\'YOUR_FORM_ID\']')"> |
| 594 |
<span class="dashicons dashicons-clipboard"></span> |
| 595 |
<?php esc_html_e('Copy Code', 'testimonial-maker'); ?> |
| 596 |
</button> |
| 597 |
</div> |
| 598 |
|
| 599 |
<div class="tml-info"> |
| 600 |
<strong><?php esc_html_e('Review Moderation & Spam Prevention:', 'testimonial-maker'); ?></strong> |
| 601 |
<?php esc_html_e('By default, all testimonials submitted through the frontend form are saved as "Pending" drafts. You can review them by navigating to Testimonial Maker > All Testimonial and clicking "Approve" (Publish) to display them live on your layouts.', 'testimonial-maker'); ?> |
| 602 |
</div> |
| 603 |
</div> |
| 604 |
|
| 605 |
<!-- 3. Designing Showcase Layouts --> |
| 606 |
<div class="tml-docs-section" id="tml-shortcode-generator"> |
| 607 |
<h2><span class="dashicons dashicons-layout"></span> <?php esc_html_e('3. Designing Showcase Layouts (Shortcode Generator)', 'testimonial-maker'); ?></h2> |
| 608 |
<p><?php esc_html_e('Once you have added testimonials (manually or via frontend submission), you can build sliders or grids to display them.', 'testimonial-maker'); ?></p> |
| 609 |
|
| 610 |
<h3><?php esc_html_e('Creating a Display Showcase:', 'testimonial-maker'); ?></h3> |
| 611 |
<ol> |
| 612 |
<li><?php esc_html_e('Navigate to Testimonial Maker > Shortcodes.', 'testimonial-maker'); ?></li> |
| 613 |
<li><?php esc_html_e('Click Add New to create a layout configuration.', 'testimonial-maker'); ?></li> |
| 614 |
<li><?php esc_html_e('Configure your display parameters across the settings panels:', 'testimonial-maker'); ?> |
| 615 |
<ul> |
| 616 |
<li><strong><?php esc_html_e('Layout Preset:', 'testimonial-maker'); ?></strong> <?php esc_html_e('Choose between Slider (Carousel) or Grid layouts.', 'testimonial-maker'); ?></li> |
| 617 |
<li><strong><?php esc_html_e('Responsive Columns:', 'testimonial-maker'); ?></strong> <?php esc_html_e('Define separate grid column counts for Large Desktops, Desktops, Laptops, Tablets, and Mobiles.', 'testimonial-maker'); ?></li> |
| 618 |
<li><strong><?php esc_html_e('Spacing & Gap:', 'testimonial-maker'); ?></strong> <?php esc_html_e('Control horizontal gap and vertical gap spacing between cards using simple sliders.', 'testimonial-maker'); ?></li> |
| 619 |
<li><strong><?php esc_html_e('Sorting & Limits:', 'testimonial-maker'); ?></strong> <?php esc_html_e('Limit the number of loaded reviews, and choose ordering types (Date, Title, ID, or Last Modified) and directions (Ascending or Descending).', 'testimonial-maker'); ?></li> |
| 620 |
<li><strong><?php esc_html_e('Theme Selection:', 'testimonial-maker'); ?></strong> <?php esc_html_e('Choose between Theme 1 (Floating Avatar Center), Theme 2 (Modern Clean Card), and Theme 3 (Centered Classic).', 'testimonial-maker'); ?></li> |
| 621 |
<li><strong><?php esc_html_e('Card Elements Visibility:', 'testimonial-maker'); ?></strong> <?php esc_html_e('Toggle on/off title, review text, designations, rating stars, and website links, and configure a fallback default reviewer avatar URL.', 'testimonial-maker'); ?></li> |
| 622 |
<li><strong><?php esc_html_e('Interactive Slider Controls:', 'testimonial-maker'); ?></strong> <?php esc_html_e('Configure loop, autoplay toggle, autoplay timeout delay speed, transition slide speed, mouse draggable, and pause-on-hover actions.', 'testimonial-maker'); ?></li> |
| 623 |
<li><strong><?php esc_html_e('Color Styling:', 'testimonial-maker'); ?></strong> <?php esc_html_e('Set customized colors for title, content, reviewer designation, star ratings, carousel navigation arrows, and card background color.', 'testimonial-maker'); ?></li> |
| 624 |
</ul> |
| 625 |
</li> |
| 626 |
<li><?php esc_html_e('Click Publish / Update. The Shortcode will be generated automatically.', 'testimonial-maker'); ?></li> |
| 627 |
</ol> |
| 628 |
|
| 629 |
<h3><?php esc_html_e('Displaying Testimonials on Your Site:', 'testimonial-maker'); ?></h3> |
| 630 |
<p><?php esc_html_e('Copy the generated shortcode and place it on any Page, Post, Widget, or Footer section:', 'testimonial-maker'); ?></p> |
| 631 |
|
| 632 |
<div class="tml-code-block-wrapper"> |
| 633 |
<pre class="tml-code-block">[TML id="YOUR_SHORTCODE_ID"]</pre> |
| 634 |
<button class="tml-copy-btn" onclick="tmlCopyCode(this, '[TML id=\'YOUR_SHORTCODE_ID\']')"> |
| 635 |
<span class="dashicons dashicons-clipboard"></span> |
| 636 |
<?php esc_html_e('Copy Code', 'testimonial-maker'); ?> |
| 637 |
</button> |
| 638 |
</div> |
| 639 |
</div> |
| 640 |
|
| 641 |
<!-- 4. User Dashboard --> |
| 642 |
<div class="tml-docs-section" id="tml-dashboard-section"> |
| 643 |
<h2><span class="dashicons dashicons-admin-users"></span> <?php esc_html_e('4. Registered Reviewers User Dashboard', 'testimonial-maker'); ?></h2> |
| 644 |
<p><?php esc_html_e('Give logged-in reviewers full visibility of reviews they have posted. They can check their review statuses (Approved/Pending) and even delete them directly from the frontend dashboard.', 'testimonial-maker'); ?></p> |
| 645 |
|
| 646 |
<p><?php esc_html_e('Create a new page (e.g., "My Account" or "Reviewer Dashboard") and paste the following shortcode:', 'testimonial-maker'); ?></p> |
| 647 |
|
| 648 |
<div class="tml-code-block-wrapper"> |
| 649 |
<pre class="tml-code-block">[TML_DASHBOARD]</pre> |
| 650 |
<button class="tml-copy-btn" onclick="tmlCopyCode(this, '[TML_DASHBOARD]')"> |
| 651 |
<span class="dashicons dashicons-clipboard"></span> |
| 652 |
<?php esc_html_e('Copy Code', 'testimonial-maker'); ?> |
| 653 |
</button> |
| 654 |
</div> |
| 655 |
|
| 656 |
<div class="tml-info"> |
| 657 |
<strong><?php esc_html_e('Security & Author Protection:', 'testimonial-maker'); ?></strong> |
| 658 |
<?php esc_html_e('The dashboard safely isolates content: it will only display testimonials matching the current logged-in user\'s ID. Non-logged-in visitors will see a notification prompting them to log in.', 'testimonial-maker'); ?> |
| 659 |
</div> |
| 660 |
</div> |
| 661 |
|
| 662 |
<!-- 5. Gutenberg & Page Builders --> |
| 663 |
<div class="tml-docs-section" id="tml-page-builders"> |
| 664 |
<h2><span class="dashicons dashicons-admin-appearance"></span> <?php esc_html_e('5. Gutenberg Block Editor & Page Builders Integration', 'testimonial-maker'); ?></h2> |
| 665 |
<p><?php esc_html_e('Enjoy direct integration with Gutenberg and page builders, preventing the need to remember or copy IDs.', 'testimonial-maker'); ?></p> |
| 666 |
|
| 667 |
<div class="tml-builders-grid"> |
| 668 |
<!-- Gutenberg block description --> |
| 669 |
<div class="tml-builder-card"> |
| 670 |
<h4><span class="dashicons dashicons-edit"></span> <?php esc_html_e('Gutenberg Block Editor', 'testimonial-maker'); ?></h4> |
| 671 |
<ol style="margin: 10px 0; padding-left: 15px; font-size: 13px;"> |
| 672 |
<li><?php esc_html_e('Open a post or page inside Gutenberg.', 'testimonial-maker'); ?></li> |
| 673 |
<li><?php esc_html_e('Click the "+" block inserter and search for "Testimonial Maker".', 'testimonial-maker'); ?></li> |
| 674 |
<li><?php esc_html_e('Insert the block. Select your desired shortcode layout config directly from the right-hand block settings panel.', 'testimonial-maker'); ?></li> |
| 675 |
</ol> |
| 676 |
</div> |
| 677 |
|
| 678 |
<!-- Elementor builder description --> |
| 679 |
<div class="tml-builder-card"> |
| 680 |
<h4><span class="dashicons dashicons-grid-view"></span> <?php esc_html_e('Elementor Page Builder', 'testimonial-maker'); ?></h4> |
| 681 |
<ol style="margin: 10px 0; padding-left: 15px; font-size: 13px;"> |
| 682 |
<li><?php esc_html_e('Edit your page in Elementor.', 'testimonial-maker'); ?></li> |
| 683 |
<li><?php esc_html_e('Search for the "Testimonial Maker" widget in the elements panel.', 'testimonial-maker'); ?></li> |
| 684 |
<li><?php esc_html_e('Drag and drop the element. Select your configured Shortcode layout from the dropdown select list.', 'testimonial-maker'); ?></li> |
| 685 |
</ol> |
| 686 |
</div> |
| 687 |
</div> |
| 688 |
</div> |
| 689 |
|
| 690 |
<!-- 6. FAQ & Support --> |
| 691 |
<div class="tml-docs-section" id="tml-faq-section"> |
| 692 |
<h2><span class="dashicons dashicons-editor-help"></span> <?php esc_html_e('6. Frequently Asked Questions & Troubleshooting', 'testimonial-maker'); ?></h2> |
| 693 |
|
| 694 |
<h3><?php esc_html_e('Why are submitted testimonials not displaying on my showcase?', 'testimonial-maker'); ?></h3> |
| 695 |
<p><?php esc_html_e('To protect your site from spam, all frontend testimonial form submissions are loaded as "Pending" drafts. Navigate to Testimonial Maker > All Testimonial, verify the content, and change the status to "Published" (Approve) to make them live.', 'testimonial-maker'); ?></p> |
| 696 |
|
| 697 |
<h3><?php esc_html_e('How can I edit the form fields?', 'testimonial-maker'); ?></h3> |
| 698 |
<p><?php esc_html_e('Go to Testimonial Maker > Form Builder, click to edit your form configuration, toggle field visibility, customize placeholders or button styles, and click save.', 'testimonial-maker'); ?></p> |
| 699 |
|
| 700 |
<h3><?php esc_html_e('Can I limit the number of testimonials shown in a slider?', 'testimonial-maker'); ?></h3> |
| 701 |
<p><?php esc_html_e('Yes. In your shortcode editor (Testimonial Maker > Shortcodes), locate the "Testimonial Limit" field. Change the default value to your desired maximum number of reviews.', 'testimonial-maker'); ?></p> |
| 702 |
|
| 703 |
<h3><?php esc_html_e('How do I show only testimonials belonging to a specific category?', 'testimonial-maker'); ?></h3> |
| 704 |
<p><?php esc_html_e('When creating or editing testimonials, assign them categories on the right sidebar. In your shortcode editor under general settings, select the category from the categories filter checklist.', 'testimonial-maker'); ?></p> |
| 705 |
</div> |
| 706 |
|
| 707 |
<!-- Call to Action --> |
| 708 |
<div class="tml-docs-cta"> |
| 709 |
<a class="button button-primary button-hero" href="https://awplife.com/demo/testimonial-premium/" target="_blank" rel="noopener noreferrer" style="border-radius:10px; font-weight:700; background-color:#10b981; border-color:#10b981; color:#fff !important; text-decoration:none;"> |
| 710 |
<span class="dashicons dashicons-visibility" style="vertical-align: middle; margin-right: 5px;"></span> |
| 711 |
<?php esc_html_e('Live Pro Demo', 'testimonial-maker'); ?> |
| 712 |
</a> |
| 713 |
<a class="button button-secondary button-hero" href="https://awplife.com/account/signup/testimonial-premium" target="_blank" rel="noopener noreferrer" style="border-radius:10px; font-weight:700; text-decoration:none;"> |
| 714 |
<span class="dashicons dashicons-cart" style="vertical-align: middle; margin-right: 5px;"></span> |
| 715 |
<?php esc_html_e('Buy Pro Version', 'testimonial-maker'); ?> |
| 716 |
</a> |
| 717 |
<a class="button button-hero" href="https://wordpress.org/support/plugin/testimonial-maker/reviews/" target="_blank" rel="noopener noreferrer" style="border-radius:10px; font-weight:700; text-decoration:none;"> |
| 718 |
<span class="dashicons dashicons-star-filled" style="vertical-align: middle; margin-right: 5px;"></span> |
| 719 |
<?php esc_html_e('Leave a Review', 'testimonial-maker'); ?> |
| 720 |
</a> |
| 721 |
</div> |
| 722 |
|
| 723 |
</main> |
| 724 |
|
| 725 |
</div> |
| 726 |
|
| 727 |
</div> |
| 728 |
|
| 729 |
<script> |
| 730 |
// Copy to clipboard utility |
| 731 |
function tmlCopyCode(btn, codeText) { |
| 732 |
if (navigator.clipboard && navigator.clipboard.writeText) { |
| 733 |
navigator.clipboard.writeText(codeText).then(showSuccess, fallbackCopy); |
| 734 |
} else { |
| 735 |
fallbackCopy(); |
| 736 |
} |
| 737 |
|
| 738 |
function showSuccess() { |
| 739 |
var origHTML = btn.innerHTML; |
| 740 |
btn.innerHTML = '<span class="dashicons dashicons-yes"></span> ' + <?php echo json_encode(__('Copied!', 'testimonial-maker')); ?>; |
| 741 |
btn.classList.add('copied'); |
| 742 |
setTimeout(function() { |
| 743 |
btn.innerHTML = origHTML; |
| 744 |
btn.classList.remove('copied'); |
| 745 |
}, 2000); |
| 746 |
} |
| 747 |
|
| 748 |
function fallbackCopy() { |
| 749 |
var textArea = document.createElement("textarea"); |
| 750 |
textArea.value = codeText; |
| 751 |
textArea.style.position = "fixed"; |
| 752 |
document.body.appendChild(textArea); |
| 753 |
textArea.focus(); |
| 754 |
textArea.select(); |
| 755 |
try { |
| 756 |
document.execCommand('copy'); |
| 757 |
showSuccess(); |
| 758 |
} catch (err) { |
| 759 |
console.error('Fallback copy failed', err); |
| 760 |
} |
| 761 |
document.body.removeChild(textArea); |
| 762 |
} |
| 763 |
} |
| 764 |
|
| 765 |
// Real-time documentation search filtering |
| 766 |
document.getElementById('tml-docs-search').addEventListener('input', function(e) { |
| 767 |
var query = e.target.value.toLowerCase().trim(); |
| 768 |
var sections = document.querySelectorAll('.tml-docs-section'); |
| 769 |
var sidebarItems = document.querySelectorAll('.tml-sidebar-item'); |
| 770 |
|
| 771 |
sections.forEach(function(section) { |
| 772 |
var headingText = section.querySelector('h2').innerText.toLowerCase(); |
| 773 |
var bodyText = section.innerText.toLowerCase(); |
| 774 |
if (headingText.indexOf(query) > -1 || bodyText.indexOf(query) > -1) { |
| 775 |
section.style.display = 'block'; |
| 776 |
} else { |
| 777 |
section.style.display = 'none'; |
| 778 |
} |
| 779 |
}); |
| 780 |
|
| 781 |
sidebarItems.forEach(function(item) { |
| 782 |
var link = item.querySelector('.tml-sidebar-link'); |
| 783 |
var targetId = link.getAttribute('href'); |
| 784 |
var targetSection = document.querySelector(targetId); |
| 785 |
var linkText = link.innerText.toLowerCase(); |
| 786 |
|
| 787 |
if (linkText.indexOf(query) > -1 || (targetSection && targetSection.style.display !== 'none')) { |
| 788 |
item.style.display = 'block'; |
| 789 |
} else { |
| 790 |
item.style.display = 'none'; |
| 791 |
} |
| 792 |
}); |
| 793 |
}); |
| 794 |
|
| 795 |
// Sticky sidebar scrollspy highlight |
| 796 |
window.addEventListener('DOMContentLoaded', function() { |
| 797 |
var sections = document.querySelectorAll('.tml-docs-section'); |
| 798 |
var navLinks = document.querySelectorAll('.tml-sidebar-link'); |
| 799 |
|
| 800 |
function updateScrollspy() { |
| 801 |
var scrollPos = window.scrollY || window.pageYOffset || document.documentElement.scrollTop; |
| 802 |
var currentId = ''; |
| 803 |
|
| 804 |
sections.forEach(function(section) { |
| 805 |
var sectionTop = section.offsetTop; |
| 806 |
var sectionHeight = section.clientHeight; |
| 807 |
|
| 808 |
if (scrollPos >= (sectionTop - 130)) { |
| 809 |
currentId = section.getAttribute('id'); |
| 810 |
} |
| 811 |
}); |
| 812 |
|
| 813 |
if (currentId) { |
| 814 |
navLinks.forEach(function(link) { |
| 815 |
if (link.getAttribute('href') === '#' + currentId) { |
| 816 |
link.classList.add('active'); |
| 817 |
} else { |
| 818 |
link.classList.remove('active'); |
| 819 |
} |
| 820 |
}); |
| 821 |
} |
| 822 |
} |
| 823 |
|
| 824 |
window.addEventListener('scroll', updateScrollspy); |
| 825 |
updateScrollspy(); // Run once on load |
| 826 |
}); |
| 827 |
</script> |
| 828 |
|
