0

I'm trying to create a custom wordpress theme. Everything has gone fine, except image formatting in post content. Image captions are not displaying properly in newly created theme. I have already added wordpress core css as given below.

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

And I'm using following code to display my post content

<?php get_header(); ?>

<div class="row">

    <div class="col-md-8">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <p><em><?php the_time('l, F jS, Y'); ?></em></p>

        <?php $content = get_the_content(); ?>
        <div class="post-content img-responsive">
            <?php echo $content?>
        </div>

        <hr>
        <?php comments_template(); ?>
    <?php endwhile; else: ?>
        <p><?php _e('Sorry, this page does not exist'); ?></p>
    <?php endif; ?>
    </div>


    <div class="col-md-4">
        <?php get_sidebar(); ?>
    </div>
</div>

<?php get_footer(); ?>

It makes some captions properly. Still some captions are not arranged properly, they are dumped into screen as in wordpress editor. Images with caption are shown as given. Current problem

What should I do to display all post contents properly?

  • Can you clarify or provide a better description of the problem/question? I'm not sure what you are trying to solve. – jdm2112 Oct 21 '14 at 13:35
  • What is the code that displays respective post content? – Rarst Oct 21 '14 at 13:41
  • I'm using the_content() to display post content – niyasc Oct 21 '14 at 15:56
  • You may find my code here in github. github.com/niyasc/TechnoRevolution3 – niyasc Oct 21 '14 at 15:58
  • @mysac, please localize the problem and add the relevant code here. No one is going to read all your code to find the problem with it. The problem is probably with bad handling of own of the shortcodes you have created in your theme so first step is to comment out all the code that you have that adds new shortcodes. – Mark Kaplun Oct 21 '14 at 16:14
0

Don't know what was the actual problem. Using following syntax to display content solved problem.

<div>
    <h tag><?php the_title(); ?></h tag>
    .............other things like date and author
    <div>
         <?php the_content(); ?>
    </div>
</div>

Any way, thanks for everybody who tried to answer my question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.