wrapping pulled text in <p> tags

Question

I have a Wordpress Site where I have pulled out the images and the text separately to use in different parts on my single.php.

HTML - (Bootstrap 3 framework)

<div class="row">
    <div class="col-md-12">
        <?php
            preg_match_all('/(<img [^>]*>)/', get_the_content(), $matches);
            for( $i=0; isset($matches[1]) && $i < count($matches[1]); $i++ ) {

            echo $matches[1][$i];
            }
        ?>
    </div>
</div><!-- /row --> 

<div class="row">
    <div class="col-md-12"> 
        <?php
            echo preg_replace('/(<img [^>]*>)/', '', get_the_content());
        ?>
    </div>
</div><!-- /row --> 

This puts the images in the first row, and the text in the second row.

However, It does not wrap the text when it's pulled out in any tags. I want to wrap the text in a < p > tag so I can apply css to it.

Also, in my browser's inspector, it pulls the href link of the image and pastes it in the code but doesn't show the picture. (the first row/code, pulls the same link and shows the picture) Not sure if thats normal or not.

Answer 1

What solid_luffy described is okay but you can go even simpler. You can just add the <p> tags before and after the text gets echoed.

<div class="col-md-12">
    <p>
        <?php
            echo preg_replace('/(<img [^>]*>)/', '', get_the_content());
        ?>
    </p>
</div>

The upside to this approach is that it decouples the page styling from the actual content, which is good practice.

Answer 2

You can do this:

<div class="col-md-12"> 
    <?php
        echo "<p class='yourclass'>";
        echo preg_replace('/(<img [^>]*>)/', '', get_the_content());
        echo "</p>";
    ?>
</div>

Echo the <p> before the text and it will be wrapped in it. Remember to echo the end tag too.