Add custom header & subtitle

  • Hey there,
    I’m working on my very first WordPress theme, and I have at the top,
    a <header> and within that, 2 <div>’s:
    – a <div> where I want a customisable image
    – a <div> containing some text.

    I would like to have the following:

    header.php

    <header>
    <div id=”custom_image”>
    <div id=”subtitle”>
    </div>
    </div>
    </header>

    (the div custom_image has the same size as <header>
    What do I have to put to give people the option to change the image from custom_image,
    and how am I able to allow people to change the text in div subtitle?

    Thanks !!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Baikare Sandip

    (@baikaresandeep007-1)

    Can you just include the link so I can check properly?

    Thread Starter LearningDesigner

    (@learningdesigner)

    Sure.

    This is what I have now:

    Header.php
    <!– header –>
    <header>
    <div id=”custom-image”>
    <div id=”main-name”>Sunrise Music Shop</div>
    </div>
    </header>
    <!– /header –>

    Style.css
    header, #custom-image{
    width:100%;
    height:400px;
    }
    header{
    z-index:1;
    }
    #custom-image{
    background-color:#667;
    background-size:100% auto;
    background-position:center;
    background-repeat:no-repeat;
    z-index:2;
    }

    (the image must be in responsive design.

    What do I have to put to give people the option to change the image from custom_image,

    This could be done either by using the new custom logo feature introduced in WordPress 4.5 or by using the custom header feature that’s existed for quite some time.

    and how am I able to allow people to change the text in div subtitle?

    If you use this code in a PHP file:

    <?php
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
  <p class="site-description"><?php echo $description; ?></p>
<?php endif; ?>

    then whatever the user has set in Dashboard > Appearance > Customize > Site Identity > Tagline will be displayed, and you can style it with CSS by targeting .site-description.

    Thread Starter LearningDesigner

    (@learningdesigner)

    Thank you so much, I got them both working! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add custom header & subtitle’ is closed to new replies.