Categories

Featured templates

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

Guillaume Dumas June 5, 2015
Rating: 5.0/5. From 2 votes.
Please wait...

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

Website Templates for Wordpress
This entry was posted in WordPress Tutorials and tagged image, portfolio, post, text, WordPress, wrap. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket