Change position of the image in the featured post in twenty fifteen theme

• 

  smoove52 · Member · Feb 4, 2015 at 9:18 am

  • Copy link
  • Add topic to favorites

  Hi,

  I’m using a twenty fifteen theme. I created a child theme and what I want is to modify a featured post. I would like to display the featured image at the left to the text (not at the top as it is now). How could I accomplish that? I also want to remove the text “featured” and the footer of that particular post. Any ideas?

• 

  designsimply · Member · Feb 13, 2015 at 7:21 am

  • Copy link

  I created a child theme

  This is only possible on a WordPress.org setup, and you have posted in a WordPress.com forum (they are separate though). We like to keep the support requests for each service separate because the answers can be confusing to other users otherwise. You can also see http://support.wordpress.com/com-vs-org/ to learn more about the differences between WordPress.org and WordPress.com if you’re interested.

  I will give you some info to point you in right direction before you go.

  what I want is to modify a featured post. I would like to display the featured image at the left to the text (not at the top as it is now)

  There is more than one way to accomplish this. I will post a CSS example since this is the CSS forum and WordPress.com users are limited to making changes via CSS only and cannot create child themes.

  This example uses a media query to limit the change to larger screens such as laptops or desktop computers. You can make the “min-width: 59em” smaller, but test it out if you do because a smaller featured image might not look as good if it is displayed very small on tablets or mobile devices.

  I think this example is fairly complex, but it should work. Note that you can adjust the padding percentages to move the title around a bit if needed.

  @media screen and (min-width: 59em) {
  	.has-post-thumbnail .post-thumbnail {
  		float: left;
  		padding-left: 10%;
  		padding-right: 1em;
  		width: 50%;
  		height: auto;
  	}
  
  	.has-post-thumbnail .entry-header {
  		padding: 3% 10% 3% 3%;
  		overflow: hidden;
  
  	}
  
  	.has-post-thumbnail .entry-content {
  		clear: both;
  	}
  }

  I also want to remove the text “featured” and the footer of that particular post. Any ideas?

  Use this method to find the selector for each of those things:
  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  Then add a rule for each one in your custom CSS with “display: none” inside the rule. Here is one example to get you started:

  .sticky-post {
  	display: none;
  }

  In the future, please post questions about Twenty Fifteen for a WordPress.org setup at https://wordpress.org/support/theme/twentyfifteen