To ensure that the content from the WordPress editor renders correctly as rich text on the front end, you can use WordPress functions and filters to convert the content to the appropriate HTML. WordPress provides the wpautop()
function, which automatically adds paragraph tags (<p>
) and line breaks (<br />
) to the content. This function can help in converting plain text to rich text.
Step-by-Step Plan
Ensure the Content is Processed with
wpautop()
: Use thewpautop()
function in your theme’s template to process the content before rendering it.Check for Common Plugins: Verify that common plugins like TinyMCE Advanced or Classic Editor are installed and configured properly. These plugins can help ensure that the visual editor works as expected and that the content is formatted correctly.
Solution: Update the Template File
Update your single-service template to use wpautop()
when rendering the content.
single-service.php
<?php get_header(); ?> <div id="smooth-wrapper"> <div id="smooth-content"> <main> <?php if (have_posts()) : while (have_posts()) : the_post(); $prev_post = get_previous_post(); $next_post = get_next_post(); $prev_link = $prev_post ? get_permalink($prev_post) : '#'; $next_link = $next_post ? get_permalink($next_post) : '#'; $banner_image = get_theme_mod('service_banner_image', get_template_directory_uri() . '/assets/images/banner/cmn-banner-bg.png'); ?> <!-- ==== banner start ==== --> <section class="cmn-banner service-single-banner bg-img" style="background-image: url('<?php echo esc_url($banner_image); ?>');"> <div class="container"> <div class="row gaper align-items-center"> <div class="col-12 col-lg-5 col-xl-7"> <div class="text-center text-lg-start"> <h2 class="title title-anim"><?php the_title(); ?></h2> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="<?php echo home_url(); ?>"> <i class="fa-solid fa-house"></i> Home </a> </li> <li class="breadcrumb-item"> <a href="<?php echo get_post_type_archive_link('service'); ?>"> Our Services </a> </li> <li id="current-service-breadcrumb" class="breadcrumb-item active" aria-current="page"> <?php the_title(); ?> </li> </ol> </nav> </div> </div> </div> </div> </section> <!-- ==== / banner end ==== --> <!-- ==== service details start ==== --> <section class="section service-details fade-wrapper"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-xl-10"> <div class="service-details__slider"> <div class="service-details__slider-single"> <article id="post-<?php the_ID(); ?>" class="entry"> <header class="entry-header"> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> </header> <div class="entry-content"> <?php echo wpautop(get_the_content()); ?> </div> </article> </div> </div> </div> </div> </div> </section> <!-- ==== / service details end ==== --> <?php endwhile; endif; ?> </main> </div> </div> <?php get_footer(); ?>
Nice Post