0

I want to improve the design of my website (https://pixelbay.net/). Rather than altering the image myself via Gimp every time I want to post, one feature I want to add is that the main category displays in the corner of the featured image. I basically want something similar to what the CoverNews theme provides, (or the Bootstrap News featured section) but I want to remain on the Bootstrap News theme.

How would I manage something like this, is there a plugin or is this only able to be done via HTML / CSS? What would I search for to learn how to add this feature if it is that way?

1 Answer 1

0

You would have to add the category via PHP on top of the image.

First find the PHP template(s) where your page is rendered. This could be archive.php for the overview. For single posts this is usually single.php, or content-single-post.php. It depends on your theme.

Then you find where the post thumbnail is being rendered, and you add some HTML markup, with the right CSS styles, so that you can place text on top of the image. And then you add the php code for printing the category. For instance:

HTML:

<div class="post-thumbnail">
  <?php the_post_thumbnail(); ?>
  <span class="image-overlay"><?php the_category(); ?></span>
</div>

CSS:

.post-thumbnail {
  position: relative;
}

.image-overlay {
  position absolute;
  top: 10px
  right: 10px;
}

The WordPress Codex is a great place to start learning how to theme in WordPress.

5
  • This doesn't work for me, Bootstrap News is a child theme of Blog, but Blog is premium. I don't have any of the listed sections. I only have stylesheet.css, theme fuctions.php, and dynamics.css Oct 21, 2018 at 21:35
  • I bought the premium theme version. Oct 21, 2018 at 22:48
  • Still doesn't work for me even with the premium. Oct 21, 2018 at 23:27
  • If you bought the premium, you could ask support.
    – Pim
    Oct 22, 2018 at 7:19
  • Aaaaaaaand the help couldn't help. Oct 26, 2018 at 1:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.