How to add full width image to post header?

Asked on September 10, 2015 in Customization.

How can I get an image to display full width at the very top of the post. I can do it in pages using the slider but not on posts.

hacke3t Layers User
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on September 11, 2015.

    Hi there,

    Posts are not widgetized, so you have a few options for doing this.

    One is to use a plugin like Aesop Story Engine or SiteOrigins Page Builder which adds content elements to your post editor . The limitation here is that these elements are confined to the post content area, and if you have a sidebar that means a max width of around 660pixels that is under the title and meta.

    Your next option is to use Custom CSS to add an image background to the post’s wrapper if you need the image above or behind the post title area. To do this you need to identify the post’s class, and write a new CSS style for every post – not very fun if you need a different image for every post. See How to Customize Your Site With CSS for a primer on doing that.

    Finally, if you feel you can get through building a basic child theme, you can use a hook to inject a custom banner section above your post that grabs the post’s featured image or an image from a custom field, or create a new widget area and add it via a hook. The drawback of the widget area is it is not post-specific and would be global, but is useful if you want to do something like add a slider to all posts, or posts in a certain category etc.

    Hi Vail Joy !

    Thanks so much for responding , I understand what you are saying  and looks like the only thing to do is learn CSS which as a beginner I know nothing about currently. Thanks for the How To link for the css.

    on September 11, 2015.