0

I am making some changes to how the blog is currently showing up in the right sidebar of a wordpress page.

  • Right now there is a large image, title, excerpt, and a Read More button.
  • I only want the blog section to show a little image on the left and title to the right (image mockup provided below).
  • I have been able to remove the excerpt and Read More button.
  • I am struggling with how the CSS needs to be created, and added to the below PHP code.

image design mockup

I'm am not the best with PHP, but I can make some updates as needed. Here is the code I have so far:

                <div class="blogwrapper">

                <?php the_post_thumbnail( 'full' ); ?>

                <h4><?php the_title(); ?></h4>

                </div>

Here is the HTML structure:

<div class="sidebarblog customsidebar customsidewds">
<div class="blogwrapper"> 
<img width="5184" height="3456" src="https://website.com/wp- 
content/uploads/2016/01/img1000.jpg" class="attachment-full size-full wp- 
post-image" alt="" srcset="https://website.com/wp- 
content/uploads/2016/01/img1000.jpg 5184w, https://website.com/wp- 
content/uploads/2016/01/img1000_300x200.jpg 300w, https://website.com/wp- 
content/uploads/2016/01/img1000.jpg-768x512.jpg 768w, 
https://website.com/wp-content/uploads/2016/01/img1000.jpg-1024x683.jpg 
1024w" sizes="(max-width: 5184px) 100vw, 5184px">
<h4>This is a sample blog title with text and more text</h4>   
</div>
<div class="blogwrapper"> 
<img width="1170" height="750" src="https://website.com/wp- 
content/uploads/2016/01/image1001.jpg" class="attachment-full size-full wp- 
post-image" alt="" srcset="https://website.com/wp- 
content/uploads/2016/01/image1001.jpg 1170w, https://website.com/wp- 
content/uploads/2016/01/image1001.jpg-300x192.jpg 300w, 
https://website.com/wp-content/uploads/2016/01/image1001.jpg-768x492.jpg 
768w, https://website.com/wp-content/uploads/2016/01/image1001.jpg- 
1024x656.jpg 1024w" sizes="(max-width: 1170px) 100vw, 1170px">
<h4>This is another sample blog title title with more and more text</h4>
</div>
</div>
0

I think it's easier to put the css code inside your theme through customize theme.

wp-admin > appearance > customize

To create a css that affects your sidebar posts like you want you need to post the html structure.

  • HTML structure added to original question. – Webman Jul 13 '18 at 16:22
  • Sorry! I readed the wrong way. You already have the css code. You just want to add your css code the right way correct? – Rafael Figueiredo Jul 13 '18 at 18:13

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.