WordPress page content style is different from editor style

Question

I am developing a WordPress theme. For my page content in the editor, it looks like this:

which is the style I want. However, when I output it in page.php, the style becomes different like this:

As you can see, the text alignment and font becomes completely different. What should I do to my theme to make the output style look exactly the same as that in the editor? Thanks

Here is my code for page.php:

<?php get_header(); ?>

<div id="content" class="row card index-card" role="main">
    <div class="col-xs-12">
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="entry-header">
                <h3 class="page-title entry-title" item-prop="headline">
                     <?php the_title(); ?>
                </h3>
            </div>
            <div class="entry-content" item-prop="text">
                <?php echo $post -> post_content; ?>
            </div>
        </article>
    </div>
</div>

<?php get_footer(); ?>

And functions.php:

<?php

add_theme_support('post-formats');
add_theme_support('post-thumbnails');

// Adding stylesheets and js libraries
function installLibraries() {
    // CSS
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    wp_enqueue_style('bootstrap-theme', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');
    wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css');
    wp_enqueue_style('slick-theme', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css');
    wp_enqueue_style('navbar-style', get_template_directory_uri() . '/css/navbar.css');
    wp_enqueue_style('footer-style', get_template_directory_uri() . '/css/footer.css');
    wp_enqueue_style('style', get_stylesheet_uri());

    // JS
    wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', array('jquery'), null, true);
    wp_enqueue_script('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js', array('jquery'), null, true);
    wp_enqueue_script('masonry', 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js', array('jquery'), null, true);
    wp_enqueue_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), null, true);
    wp_enqueue_script('index', get_template_directory_uri() . '/js/index.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'installLibraries');


// Adding menu support as well as walker
require_once('wp-bootstrap-navwalker.php');
register_nav_menus(array(
    'main_menu' => __('Main Menu', 'mw-material')
));
// Add search at the end
function nav_search($items, $args) {
    // If this isn't the primary menu, do nothing
    if( !($args->theme_location == 'main_menu') ) {
            return $items;
        }
    // Otherwise, add search form
    return $items . '<div class="search-dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                <img class="search-icon" alt="search" src='. get_template_directory_uri() . '/img/icons/search.png?>
            </a>
            <ul class="dropdown-menu">
                <li>' . get_search_form(false) .'</li>
            </ul>
        </div>';
}
add_filter('wp_nav_menu_items', 'nav_search', 10, 2);

This specific problem is more for WordPress

Cornel Raiu · Accepted Answer · 2017-06-30T02:16:19.527

1

In css set your to float:left. That should work: http://jsfiddle.net/cornelraiu/kYDgL/1016/

How to wrap text around an image using HTML/CSS

Add

.entry-content img{float:left}

edited Jun 30 '17 at 02:16

answered Jun 30 '17 at 02:06

Cornel Raiu

2,758
3
22
31

No, it stayed the same – thousight Jun 30 '17 at 02:09
check the fiddle I just added – Cornel Raiu Jun 30 '17 at 02:10
I saw it, I also tried it in my code, it didn't work. I believe we are having a different situation – thousight Jun 30 '17 at 02:11
My case has to do with WordPress php I believe – thousight Jun 30 '17 at 02:11
I doubt it. can you add the css code for your .entry-content class? In the question, as an edit – Cornel Raiu Jun 30 '17 at 02:12
.entry-content { float: left; } – thousight Jun 30 '17 at 02:15
It's literally this, not joking – thousight Jun 30 '17 at 02:15
but you are floating the whole content. – Cornel Raiu Jun 30 '17 at 02:15
How should I change it then? – thousight Jun 30 '17 at 02:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148002/discussion-between-cornel-raiu-and-thousight). – Cornel Raiu Jun 30 '17 at 02:16

WordPress page content style is different from editor style

1 Answers1