I'm building a site using bootstrap and converting to WordPress. I have some hero images on pages where a user won't need to change them. However, I have a custom post type that I really want the same style of hero image, but for it to be changeable within the post type edit screen.

My current hero images on other pages are referenced in my CSS, I tried using a full width container as a feature image but then my text overlay stops working.

Here is my front end code:

        <section id="location-feature">
    <div class="container-fluid no-padding">

           <div class="row">

            <div class="col-md-12" padding-0>

                <!-- If user uploaded image -->

                    <?php if( !empty($location_hero_image)) : ?>

<img class="img-responsive" src="<?php echo $location_hero_image['url']; ?>" alt="<?php echo $location_hero_image['alt']; ?>">

                        <?php endif; ?>

                <h1><?php echo $location_hero_title; ?></h1>

                <p class="lead"><?php echo $location_hero_subtext; ?></p>

            </div><!-- end col -->
        </div><!-- row -->
    </div><!-- container -->
  • should users really upload from the dashboard (first page of the wordpress admin)? if not probably this theme feature is your solution: add_theme_support( 'custom-header' ); codex.wordpress.org/Custom_Headers
    – s t
    Apr 25, 2017 at 21:42

1 Answer 1


You can set them as featured image of custom post type and then call it within the while loop for displaying all the contents of the custom post type.

    $args = array('post_type' => 'your_custom_post_type');
    query_posts( $args );

    while (have_posts()) : the_post();
     // check if the post has a Post Thumbnail assigned to it.
     if ( has_post_thumbnail() ) {
        //access feature image
  • That sounds a good option actually - I am also trying to make it a parallax image so am fiddling with that right now. My main issue is getting the text to go over the top of the image. I guess I should have made that clear, just reread my question!
    – Tracy
    Apr 25, 2017 at 22:14
  • Either you can set the image as a background image, use apply a class to it and then add the image field by css. or play around with Z-index.
    – Akshat
    Apr 26, 2017 at 7:29
  • Yes, that's what I am trying to do - I have got the style for full width sorted out, the text overlay in my css but it's not overlaying. Parallax isn't happening, I will try the z-index. I've been Googling this and there are plugins for parallax but I don't want to use any for design.
    – Tracy
    Apr 26, 2017 at 8:02

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.