Message:

I made a custom WordPress theme from scratch.

I am having an issue: when I post something on a page or post and use the Gutenberg editor to make something as simple as 2 columns with text and image (see images), the content on the page just puts them under each other and ignores the WP styling.

Screenshots:
content in the Gutenberg editor:

content on the page side:

Inspect Element side of the content:

I can also see the element that has the "wp-column-block" styling on it has no styling reaching it (as if there is no style.css for it so so!?):

I am using <?php echo get_the_content(); ?> to fetch the content of the page which is in my singular.php file:

<!DOCTYPE html>

<html lang="de">

<?php include 'parts/head.php'; ?>

<body>

    <!-- <?php wp_body_open();?> -->

    <?php

        $thumbnail_Link = get_template_directory_uri()."/media/home-hero-bk.jpeg";

        $thumbnaul_alt = "page thumbnail image";

        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.

            $thumbnail_Link= get_the_post_thumbnail_url();

            $thumbnaul_alt = get_the_post_thumbnail_caption();

        }

    ?>

    <header class="page-hero" style="background-image: url('<?php echo $thumbnail_Link ?>');">

        <?php $dark_nav = false; include 'parts/nav.php'; ?>

    </header>

    <main class="page limit-page-width">

        <h2 class="page__title"><?php echo get_the_title(); ?></h2>

        <section class="page-post">

            <?php echo get_the_content(); ?>

            <?php if( get_field('page_shortcode') ): ?>

                <?php echo do_shortcode( get_field('page_shortcode') ) ?>

            <?php endif; ?>

        </section>

    </main>

    <?php include 'parts/footer.php'; ?>

</body>

<script src="<?php echo get_template_directory_uri().'/js/script.js' ?>"></script>

</html>

and the following are the settings in my function.php:

<?php

function add_theme_scripts() {

    wp_enqueue_style( 'style', get_template_directory_uri() .'/style.css', array(), null, 'all' );

    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array(), null, true);

}



add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

add_theme_support('title-tag');



add_theme_support( 'post-thumbnails' );



function cc_mime_types($mimes) {

    $mimes['svg'] = 'image/svg+xml';

    return $mimes;

}

add_filter('upload_mimes', 'cc_mime_types');



// Remove p tags from category description

remove_filter('term_description','wpautop');



function register_my_menus(){

    register_nav_menus(

        array(

        'main-menu' => 'Main Menu',

        'footer-right' => 'Footer Right',

        'footer-left' => 'Footer Left'

        )

    );

}

add_action('init','register_my_menus');



function get_id_by_slug($page_slug) {

    $page = get_page_by_path($page_slug);

    if ($page) {

        return $page->ID;

    } else {

        return null;

    }

} 



$role = get_role('editor'); 

$role->add_cap('edit_theme_options');



function filter_content_example($content) {

    $content = do_shortcode($content);

    return $content;

}

add_filter('the_content', 'filter_content_example');



function new_excerpt_more($output) {

    return $output . '<p class="section-abposts__post__content__text"><a href="'. get_permalink() . '">' . 'Mehr lesen...' . '</a></p>';

}

add_filter('get_the_excerpt', 'new_excerpt_more');

How can I fix the issue so the client can just use the WordPress editor to format his posts?

My Answer:
It looks like the issue might be related to how the content is being output in your singular.php file. Instead of using `get_the_content()`, you can try using `the_content()` function which will automatically apply the necessary formatting and styling to the content.

Replace this line:

php

With this line:

php

This should ensure that the content is displayed with the proper formatting and styling applied by WordPress. Additionally, make sure that your theme's style.css file includes styles for the Gutenberg editor blocks such as `wp-column-block`.

If the issue persists, you may also want to check if there are any conflicting styles in your theme's CSS that might be overriding the default Gutenberg editor styles. You can use browser developer tools to inspect the elements and see which styles are being applied.

By making these changes and ensuring that your theme's CSS includes styles for Gutenberg editor blocks, you should be able to display the content with the proper formatting and styling applied.

John Davidson

php - Custom WP theme ignoring post and page content formating

Rate this post

Comments