0

I'd like to add a text area to my child theme's Home page. The text area will go below the slider and above the three thumbnail section. (See image)

enter image description here

I've created a child theme and I was instructed to add code to the Home.php file. I've copied Home.php to my child theme directory (along with style.css and functions.php). I tried to add a div with text and a code block from the theme's demo to Home.php but the modification is not visible when I open the page in the browser.

Here's Home.php:

<?php

get_header(); ?>

<?php if ( '0' != get_theme_mod( 'category_slideshow_home', '0' ) ) { ?>
<?php if ( '' != get_theme_mod( 'category_slideshow_home', '0' ) ) { ?>

<!-- BEGIN .home-slider -->
<div class="home-slider">

    <!-- BEGIN .row -->
    <div class="row">

        <?php get_template_part( 'content/slider', 'featured' ); ?>

    <!-- END .row -->
    </div>

<!-- END .home-slider -->
</div>

<?php } ?>
<?php } ?>

<!-- BEGIN .homepage -->
<div class="homepage">

    <!-- BEGIN .row -->
    <div class="row">

        <?php if ( '0' != get_theme_mod( 'page_left', '0' ) && '0' != get_theme_mod( 'page_mid', '0' ) && '0' != get_theme_mod( 'page_right', '0' ) ) { ?>
        <?php if ( '' != get_theme_mod( 'page_left', '0' ) && '' != get_theme_mod( 'page_mid', '0' ) && '' != get_theme_mod( 'page_right', '0' ) ) { ?>

        <!-- BEGIN .content -->
        <div class="content featured-pages no-bg overlap">

            <div class="holder third first">
                <?php $recent = new WP_Query('page_id='.get_theme_mod( 'page_left', '0' )); while($recent->have_posts()) : $recent->the_post(); ?>
                    <?php get_template_part( 'content/home', 'page' ); ?>
                <?php endwhile; ?>
            </div>

            <div class="holder third">
                <?php $recent = new WP_Query('page_id='.get_theme_mod( 'page_mid', '0' )); while($recent->have_posts()) : $recent->the_post(); ?>
                    <?php get_template_part( 'content/home', 'page' ); ?>
                <?php endwhile; ?>
            </div>

            <div class="holder third last">
                <?php $recent = new WP_Query('page_id='.get_theme_mod( 'page_right', '0' )); while($recent->have_posts()) : $recent->the_post(); ?>
                    <?php get_template_part( 'content/home', 'page' ); ?>
                <?php endwhile; ?>
            </div>

            <!-- My Edits --> 
            <div class="content featured-bottom shadow radius-full top-space">
                <div class="feature-img post-banner radius-full" style="background-image: url(https://organicthemes.com/demo/restaurant/files/2014/07/dragne-marius-117368-1-1800x800.jpg);">
                <div class="vertical-center">
                <h2 class="headline">We Use Only Fresh, Local Ingredients</h2>
                <h4 class="excerpt">All Organic Vegetables &amp; Free Range Meats</h4>
                </div>
                <img src="https://organicthemes.com/demo/restaurant/files/2014/07/dragne-marius-117368-1-1800x800.jpg" class="attachment-restaurant-featured-medium size-restaurant-featured-medium wp-post-image" alt="" srcset="https://organicthemes.com/demo/restaurant/files/2014/07/dragne-marius-117368-1-1800x800.jpg 1800w, https://organicthemes.com/demo/restaurant/files/2014/07/dragne-marius-117368-1-300x133.jpg 300w, https://organicthemes.com/demo/restaurant/files/2014/07/dragne-marius-117368-1-768x341.jpg 768w, https://organicthemes.com/demo/restaurant/files/2014/07/dragne-marius-117368-1-1024x455.jpg 1024w, https://organicthemes.com/demo/restaurant/files/2014/07/dragne-marius-117368-1-640x284.jpg 640w" sizes="(max-width: 1800px) 100vw, 1800px"> </div>
            </div>

            <div>
                <?php echo "hello world"; ?>
            </div>

            <!-- END My Edits -->

        <!-- END .content -->
        </div>

        <?php } ?>
        <?php } ?>

        <?php if ( '0' != get_theme_mod( 'page_bottom', '0' ) ) { ?>
        <?php if ( '' != get_theme_mod( 'page_bottom', '0' ) ) { ?>

        <?php $recent = new WP_Query('page_id='.get_theme_mod( 'page_bottom', '0' )); while($recent->have_posts()) : $recent->the_post(); ?>
        <?php $thumb = ( has_post_thumbnail() ) ? wp_get_attachment_image_src( get_post_thumbnail_id(), 'restaurant-featured-medium' ) : false; ?>
        <?php $has_content = get_the_content(); ?>

        <!-- BEGIN .content -->
        <div class="content featured-bottom shadow radius-full<?php if ( '' != get_theme_mod( 'page_left' ) && '' != get_theme_mod( 'page_mid' ) && '' != get_theme_mod( 'page_right' ) ) { ?> top-space<?php } else { ?> overlap<?php } ?>">

            <?php if ( has_post_thumbnail() ) { ?>
                <div class="feature-img post-banner<?php if ( $has_content == '' ) { ?> radius-full<?php } ?>" <?php if ( ! empty( $thumb ) ) { ?> style="background-image: url(<?php echo $thumb[0]; ?>);" <?php } ?>>
                    <div class="vertical-center">
                        <h2 class="headline"><?php the_title(); ?></h2>
                        <?php remove_filter('the_excerpt', 'wpautop'); ?>
                        <?php if ( ! empty( $post->post_excerpt ) ) { ?>
                            <h4 class="excerpt"><?php the_excerpt(); ?></h4>
                        <?php } ?>
                    </div>
                    <?php the_post_thumbnail( 'restaurant-featured-medium' ); ?>
                </div>
            <?php } ?>

            <?php get_template_part( 'content/home', 'bottom' ); ?>

        <!-- END .content -->
        </div>

        <?php endwhile; ?>

        <?php } ?>
        <?php } ?>

        <?php if ( '0' == get_theme_mod( 'page_left', '0' ) && '0' == get_theme_mod( 'page_mid', '0' ) && '0' == get_theme_mod( 'page_right', '0' ) && '0' == get_theme_mod( 'page_bottom' ) ) { ?>

        <!-- BEGIN .content -->
        <div class="content shadow radius-full <?php if ( '' != get_theme_mod( 'category_slideshow_home' ) ) { ?>top-space<?php } ?>">

            <!-- BEGIN .padded -->
            <div class="padded">

                <!-- BEGIN .outline -->
                <div class="outline">

                    <!-- BEGIN .postarea -->
                    <div class="postarea full">

                        <?php get_template_part( 'content/content', 'none' ); ?>

                    <!-- END .postarea -->
                    </div>

                <!-- END .outline -->
                </div>

            <!-- END .padded -->
            </div>

        <!-- END .content -->
        </div>

        <?php } ?>

    <!-- END .row -->
    </div>

<!-- END .homepage -->
</div>

<?php get_footer(); ?>

If anyone could point me in the right direction I'd appretiate it. Thanks!

  • 2
    Two things could be happening - either you're in the wrong template file, or you need to adjust css. Have you checked to see whether the "hello world" div is appearing somewhere within the html if you view the source? If the html is there, you have a css problem. If the html is not there, you need to look in a different template file such as front-page.php. – WebElaine Dec 1 '17 at 21:30
  • Thanks for the response @WebElaine! I was able to resolve the problem by refreshing the page cache. The HTML code appears fine now. – zzMzz Dec 4 '17 at 19:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.