If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

WordPress Cherry 3.x. How to make text wrap the image on portfolio post pages

This tutorial shows how to make text wrap the image on portfolio post pages in WordPress templates.

WordPress. How to make text wrap the image on portfolio post pages

By default, the featured image and post text are positioned side by side and wrapped inside span elements that define the width of each of them:

WordPress._How_to_make_text_wrap_the_image_on_portfolio_post_pages-1

In order to make text wrap the media content on portfolio post pages, you need to perform the following:

  1. Copy the file loop-single-portfolio.php from the folder wordpress/wp-content/themes/CherryFramework/loop/ to wordpress/wp-content/themes/themeXXXX/loop/. If there is no loop/ folder inside themeXXXX/, you need to create one.

  2. Open up the file wordpress/wp-content/themes/themeXXXX/loop/loop-single-portfolio.php and remove the following code:

    1. lines 55, 126

      <!-- BEGIN .entry-content -->		  			
      <div class="entry-content <?php echo $right_block; ?>">
      
      </div><!-- END .entry-content -->
      		  			
    2. lines 57, 124

      <!-- BEGIN .entry-meta -->		  			
      <div class="<?php echo $wrapper_blok_class; ?>">
      
      </div>
      		  			
    3. lines 119, 125

      <div class="<?php echo $content_blok_class; ?>">
      
      </div>
      		  			

    Please check out the screenshots. The code that needs to be removed is highlighted:

    WordPress._How_to_make_text_wrap_the_image_on_portfolio_post_pages-2

    WordPress._How_to_make_text_wrap_the_image_on_portfolio_post_pages-3

  3. Open up the file wordpress/wp-content/themes/themeXXXX/style.css and add the following code to the very bottom:

    .portfolio p {
    	display: block !important;
    	text-align: justify;
    }
    div[data-motopress-loop-file="loop/loop-single-portfolio.php"] .span7 {
    	margin-right: 20px;
    }
    		  
  4. Save the changes in the style.css and loop-single-portfolio.php files and upload them to the server.

    The result should look like this:

    WordPress._How_to_make_text_wrap_the_image_on_portfolio_post_pages-4

Feel free to check the detailed video tutorial below:

WordPress. How to make text wrap the image on portfolio post pages