File: /var/www/viitorcloud.stgviitor.com/Viitorcloud3.0-wp/wp-content/themes/viitorcloud/single.php
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package viitorcloud
*/
get_header();
?>
<?php
$post_thumbnail_id = get_post_thumbnail_id($post->ID);
$img_ar = wp_get_attachment_image_src($post_thumbnail_id, 'full');
?>
<section class="bg-gray-100 relative flex justify-center items-center py-20 bg-center bg-cover bg-no-repeat">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row md:items-center mb-6">
<p class="uppercase text-sm font-semibold text-crayola-900 md:mr-4">
<?php
$categories = get_the_category();
$parent_ids = array_column($categories, 'parent');
foreach ($categories as $category) {
$term_id = $category->term_id;
if (!in_array($term_id, $parent_ids)) {
$last_category_name = $category->name;
}
} ?>
<span class="bg-white/20 px-3 py-1 rounded-md">
<?php echo esc_html($last_category_name); ?>
</span>
</p>
<p class="flex items-center text-black text-sm mt-2 md:mt-0">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd" />
</svg>
<?php display_reading_time(); ?>
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-7 text-black">
<h1 class="heading xl:text-h4 md:text-h5 text-body1 mb-3 xl:mb-6 md:mb-4">
<?php the_title(); ?>
</h1>
<ul class="list-none m-0 flex items-center text-black text-sm space-x-4">
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-gray-800 dark:text-black" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path fill="currentColor" d="M6 1a1 1 0 0 0-2 0h2ZM4 4a1 1 0 0 0 2 0H4Zm7-3a1 1 0 1 0-2 0h2ZM9 4a1 1 0 1 0 2 0H9Zm7-3a1 1 0 1 0-2 0h2Zm-2 3a1 1 0 1 0 2 0h-2ZM1 6a1 1 0 0 0 0 2V6Zm18 2a1 1 0 1 0 0-2v2ZM5 11v-1H4v1h1Zm0 .01H4v1h1v-1Zm.01 0v1h1v-1h-1Zm0-.01h1v-1h-1v1ZM10 11v-1H9v1h1Zm0 .01H9v1h1v-1Zm.01 0v1h1v-1h-1Zm0-.01h1v-1h-1v1ZM10 15v-1H9v1h1Zm0 .01H9v1h1v-1Zm.01 0v1h1v-1h-1Zm0-.01h1v-1h-1v1ZM15 15v-1h-1v1h1Zm0 .01h-1v1h1v-1Zm.01 0v1h1v-1h-1Zm0-.01h1v-1h-1v1ZM15 11v-1h-1v1h1Zm0 .01h-1v1h1v-1Zm.01 0v1h1v-1h-1Zm0-.01h1v-1h-1v1ZM5 15v-1H4v1h1Zm0 .01H4v1h1v-1Zm.01 0v1h1v-1h-1Zm0-.01h1v-1h-1v1ZM2 4h16V2H2v2Zm16 0h2a2 2 0 0 0-2-2v2Zm0 0v14h2V4h-2Zm0 14v2a2 2 0 0 0 2-2h-2Zm0 0H2v2h16v-2ZM2 18H0a2 2 0 0 0 2 2v-2Zm0 0V4H0v14h2ZM2 4V2a2 2 0 0 0-2 2h2Zm2-3v3h2V1H4Zm5 0v3h2V1H9Zm5 0v3h2V1h-2ZM1 8h18V6H1v2Zm3 3v.01h2V11H4Zm1 1.01h.01v-2H5v2Zm1.01-1V11h-2v.01h2Zm-1-1.01H5v2h.01v-2ZM9 11v.01h2V11H9Zm1 1.01h.01v-2H10v2Zm1.01-1V11h-2v.01h2Zm-1-1.01H10v2h.01v-2ZM9 15v.01h2V15H9Zm1 1.01h.01v-2H10v2Zm1.01-1V15h-2v.01h2Zm-1-1.01H10v2h.01v-2ZM14 15v.01h2V15h-2Zm1 1.01h.01v-2H15v2Zm1.01-1V15h-2v.01h2Zm-1-1.01H15v2h.01v-2ZM14 11v.01h2V11h-2Zm1 1.01h.01v-2H15v2Zm1.01-1V11h-2v.01h2Zm-1-1.01H15v2h.01v-2ZM4 15v.01h2V15H4Zm1 1.01h.01v-2H5v2Zm1.01-1V15h-2v.01h2Zm-1-1.01H5v2h.01v-2Z" />
</svg>
<?php echo esc_html(get_the_date()); ?>
</li>
</ul>
</div>
<div class="md:col-span-5">
<?php if (!empty($img_ar[0])) { ?>
<div class="rounded-2xl overflow-hidden shadow-lg">
<img src="<?php echo esc_url($img_ar[0]); ?>" alt="<?php the_title_attribute(); ?>" class="w-full h-full object-cover">
</div>
<?php } ?>
</div>
</div>
</div>
</section>
<div class="py-4 border-t" style="background-color: #e0e0e0;">
<div class="container mx-auto px-4">
<p class="text-gray-600 text-sm">
<a href="<?php echo esc_url(site_url()); ?>" class="hover:text-blue-600">Home</a> /
<a href="<?php echo esc_url(home_url('/blog')); ?>" class="hover:text-blue-600">Blog</a> /
<span class="text-gray-800"><?php the_title(); ?></span>
</p>
</div>
</div>
<section>
<div class="container">
<div id="primary" class="max-w-7xl mx-auto px-4 py-10 blog-details">
<div class="flex flex-col lg:flex-row gap-10">
<!-- Sidebar -->
<aside id="table-of-content" class="lg:w-1/4 space-y-8 lg:sticky lg:top-24 lg:self-start lg:z-10 lg:max-h-[calc(100vh-6rem)]">
<?php
$content = apply_filters('the_content', get_post_field('post_content', get_the_ID()));
preg_match_all('/<h2\b[^>]*>(.*?)<\/h2>/is', $content, $matches);
if (!empty($matches[0])) { ?>
<div class="bg-gray-100 border border-gray-200 rounded-2xl p-5">
<p class="font-semibold text-gray-800 mb-3">
Table of Contents
</p>
<ul id="toc-list" class="space-y-2">
<?php
$index = 0;
foreach ($matches[1] as $heading) {
$anchor = sanitize_title(strip_tags($heading));
$title = strip_tags($heading);
echo '<li><a href="#' . esc_attr($anchor) . '" data-index="' . $index . '" class="toc-link block text-gray-600 hover:text-blue-600 transition">' . esc_html($title) . '</a></li>';
$index++;
}
?>
</ul>
</div>
<?php } ?>
<!-- Share Section -->
<div class="bg-gray-100 border border-gray-200 rounded-2xl p-5">
<p class="font-semibold uppercase text-gray-800 mb-3">
SHARE
</p>
<ul class="flex items-center space-x-4">
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"
target="_blank" rel="noopener noreferrer"
class="w-10 h-10 flex items-center justify-center rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300 transition">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/FB-black.svg" alt="Copy Link" class="w-5 h-5">
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>"
target="_blank" rel="noopener noreferrer"
class="w-10 h-10 flex items-center justify-center rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300 transition">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/x-black.svg" alt="X" class="w-5 h-5">
</a>
</li>
<li>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php the_permalink(); ?>"
target="_blank" rel="noopener noreferrer"
class="w-10 h-10 flex items-center justify-center rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300 transition">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/linkedin-black.svg" alt="Linkedin" class="w-5 h-5">
</a>
</li>
<li>
<a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>"
target="_blank" rel="noopener noreferrer"
class="w-10 h-10 flex items-center justify-center rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300 transition">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/pinterest-black.svg" alt="Pinterest" class="w-5 h-5">
</a>
</li>
<li>
<a href="" class="copy-url-btn w-10 h-10 flex items-center justify-center rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300 transition copy-url-btn">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/link-black.svg" alt="link" class="w-5 h-5">
</a>
</li>
<script>
document.addEventListener('DOMContentLoaded', function() {
const copyUrlBtn = document.querySelector('.copy-url-btn');
copyUrlBtn.addEventListener('click', function(event) {
event.preventDefault();
const permalink = "<?php the_permalink(); ?>";
navigator.clipboard.writeText(permalink)
.then(() => {
// URL copied to clipboard
})
.catch(err => {
console.error('Failed to copy URL: ', err);
});
});
});
</script>
</ul>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 main-single-details-wrapper main-details post-content">
<div class="prose max-w-none prose-headings:scroll-mt-24 prose-h2:font-semibold prose-h2:text-2xl prose-p:text-gray-700">
<?php
// Ensure H2 elements have ids so TOC anchors jump to them correctly.
$content = preg_replace_callback('/<h2\b([^>]*)>(.*?)<\/h2>/is', function ($m) {
$attrs = $m[1];
$inner = $m[2];
$id = sanitize_title(strip_tags($inner));
// If an id already exists, keep as-is.
if (preg_match('/\bid\s*=\s*(["\'])(.*?)\1/i', $attrs)) {
return '<h2' . $attrs . '>' . $inner . '</h2>';
}
return '<h2' . $attrs . ' id="' . esc_attr($id) . '">' . $inner . '</h2>';
}, $content);
// Output the processed content (already filtered above).
echo $content;
?>
</div>
<!-- Author Box -->
<?php
$post_author_id = (int) get_post_field('post_author', get_the_ID());
$author_data = $post_author_id ? get_userdata($post_author_id) : null;
$author_name = $author_data ? $author_data->display_name : '';
$author_url = $post_author_id ? get_author_posts_url($post_author_id) : '';
$author_bio = $author_data ? $author_data->description : '';
$acf_avatar = get_field('upload_profile_picture', 'user_' . $post_author_id);
$author_avatar = '';
if ($acf_avatar && !empty($acf_avatar['url'])) {
// ACF Image found → use it
$author_avatar = '<img src="' . esc_url($acf_avatar['url']) . '" class="h-16 w-16 rounded-full object-cover" alt="' . esc_attr($author_name) . '"/>';
} else {
// fallback to default WP avatar
$author_avatar = get_avatar($post_author_id, 50);
}
// All social links from user_contactmethods
$author_social_links = [
'facebook' => $post_author_id ? get_user_meta($post_author_id, 'facebook', true) : '',
'twitter' => $post_author_id ? get_user_meta($post_author_id, 'twitter', true) : '',
'linkedin' => $post_author_id ? get_user_meta($post_author_id, 'linkedin', true) : '',
'pinterest' => $post_author_id ? get_user_meta($post_author_id, 'pinterest', true) : '',
'website' => get_the_author_meta('user_url', $post_author_id),
'whatsapp' => $post_author_id ? get_user_meta($post_author_id, 'whatsapp', true) : '',
];
?>
<div class="mt-10 p-6 bg-gray-50 border border-gray-200 rounded-2xl">
<div class="flex items-center gap-4">
<div class="flex-shrink-0">
<?php echo $author_avatar; ?>
</div>
<div>
<p class="font-semibold text-lg text-gray-800">
<?php echo esc_html($author_name); ?>
</p>
</div>
</div>
<?php if (!empty($author_bio)) {
$first_period_position = strpos($author_bio, '.');
if ($first_period_position !== false) {
$author_bio_substr = substr($author_bio, 0, $first_period_position + 1);
echo '<p class="mt-4 text-gray-600">' . esc_html($author_bio_substr) . '</p>';
} else {
echo '<p class="mt-4 text-gray-600">' . esc_html($author_bio) . '</p>';
}
} ?>
</div>
<!-- FAQ Section -->
<?php
$choose_heading = get_field('choose_heading');
$main_heading = get_field('main_heading');
$frequently_asked_questions = get_field('faq');
if ($main_heading) { ?>
<div class="mt-10 faq-section">
<div class="mb-6 xl:mb-10 md:mb-8">
<<?php echo esc_html($choose_heading ?: 'h4'); ?> class="heading xl:text-h5 text-body3 text-black-900">
<?php echo esc_html($main_heading); ?>
</<?php echo esc_html($choose_heading ?: 'h4'); ?>>
</div>
<div class="faq-wrapper">
<?php if ($frequently_asked_questions): ?>
<?php foreach ($frequently_asked_questions as $index => $faq):
$question = $faq['question'];
$answer = $faq['answer'];
?>
<div class="faq-item border border-grey-100 rounded-[8px] px-4 py-4 md:px-4 md:py-5 mb-4 overflow-hidden transition-all ease-in-out duration-300 <?php echo $index === 0 ? 'active max-h-[1000px]' : 'max-h-[90px]'; ?>">
<div class="faq-header flex justify-between items-center cursor-pointer">
<p class="heading xl:text-body4 md:text-body5 text-body6 text-black-900 max-w-[90%]">
<?php echo esc_html($question); ?>
</p>
<span class="icon-wrapper min-w-[27px] min-h-[27px] max-h-[27px] max-w-[27px] md:min-w-[30px] md:min-h-[30px] md:max-h-[30px] md:max-w-[30px] rounded-full flex items-center justify-center transition-all transform <?php echo $index === 0 ? 'bg-black-900' : 'bg-indigo-900'; ?>">
<?php if ($index === 0): ?>
<!-- Minus icon -->
<svg class="minus-icon" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="15" fill="#1D1D1D"></rect>
<path d="M8 14.0039H22C22.55 14.0039 23 14.4539 23 15.0039C23 15.5539 22.55 16.0039 22 16.0039H8C7.45 16.0039 7 15.5539 7 15.0039C7 14.4539 7.45 14.0039 8 14.0039Z" fill="white" />
</svg>
<svg class="plus-icon hidden" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 7H9V1C9 0.45 8.55 0 8 0C7.45 0 7 0.45 7 1V7H1C0.45 7 0 7.45 0 8C0 8.55 0.45 9 1 9H7V15C7 15.55 7.45 16 8 16C8.55 16 9 15.55 9 15V9H15C15.55 9 16 8.55 16 8C16 7.45 15.55 7 15 7Z" fill="white" />
</svg>
<?php else: ?>
<!-- Plus icon -->
<svg class="plus-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 7H9V1C9 0.45 8.55 0 8 0C7.45 0 7 0.45 7 1V7H1C0.45 7 0 7.45 0 8C0 8.55 0.45 9 1 9H7V15C7 15.55 7.45 16 8 16C8.55 16 9 15.55 9 15V9H15C15.55 9 16 8.55 16 8C16 7.45 15.55 7 15 7Z" fill="white" />
</svg>
<svg class="minus-icon hidden" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="15" fill="#1D1D1D"></rect>
<path d="M8 14.0039H22C22.55 14.0039 23 14.4539 23 15.0039C23 15.5539 22.55 16.0039 22 16.0039H8C7.45 16.0039 7 15.5539 7 15.0039C7 14.4539 7.45 14.0039 8 14.0039Z" fill="white" />
</svg>
<?php endif; ?>
</span>
</div>
<div class="faq-content mt-3 <?php echo $index === 0 ? '' : 'hidden'; ?>">
<?php
if (strpos($answer, '<p') !== false) {
// Old WYSIWYG content (already has HTML)
echo '<div class="heading xl:text-body6 text-body7 text-black-600">';
echo wp_kses_post($answer);
echo '</div>';
} else {
// New textarea content (plain text)
echo '<p class="heading xl:text-body6 text-body7 text-black-600">';
echo wp_strip_all_tags($answer);
echo '</p>';
}
?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<?php } ?>
</main>
</div>
</div>
</div>
</section>
<?php
get_footer();
?>