• ariananicole

    (@ariananicole)


    Hi! I’m trying to figure out how to add a new section (or full-width widget) to the home page. My website is http://ariananicoledesigns.com. Currently I have a full-width header image and three image/text boxes below it, but I want to add an additional image between the two and I want it to be full width and clickable (like the “Learn More” button/section on this website: http://www.sprucerd.com ). Is this possible?

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Siobhan

    (@siobhyb)

    Hi there,

    It is possible to add a new widget area to your home page but this does require some familiarity with HTML and basic PHP.

    If you’re comfortable experimenting with code, the first step is to set up a child theme. You can find guidance on how to do that here:

    https://codex.ww.wp.xz.cn/Child_Themes

    Once you have created your child theme, copy/paste the page-templates/front-page.php file from the parent theme.

    You could manually insert HTML for your new text area beneath </div><!– #primary –>.

    A better option is for you to create a new widget area. You can find information on creating a new widget area for your theme here:

    http://codex.ww.wp.xz.cn/Widgetizing_Themes

    I also provided some further details on creating a widget area for Sela in a similar thread here:

    https://ww.wp.xz.cn/support/topic/sela-add-text-area-above-widgets?replies=7#post-8446019

    Let me know how you get on with that! I’ll be happy to provide some further guidance if needed.

    Thread Starter ariananicole

    (@ariananicole)

    Thanks for your help, Siobhan!

    I was able to set up the page template file and I started creating a new widget area by adding the needed code to the functions.php file. Now I’m trying to display the widget area but got stuck here:

    <?php if ( is_active_sidebar( ‘home_right_1’ ) ) : ?>
    <div id=”primary-sidebar” class=”primary-sidebar widget-area” role=”complementary”>
    <?php dynamic_sidebar( ‘home_right_1’ ); ?>
    </div><!– #primary-sidebar –>
    <?php endif; ?>

    Which parts of the code above should I edit to match my theme? And do I need to use specific verbiage to ensure the widget is full width? Also, I’ve looked at the code in other files such as page-templates/front-page.php, but I’m having a hard time figuring out what parts of the code I can use as a template to create what I need – I’m trying to make a full width row with 4 columns.

    Siobhan

    (@siobhyb)

    Hi there,

    Which parts of the code above should I edit to match my theme?

    You will need to edit home_right_1 to match the ID that you’ve set your widget in the functions.php file. If you gave your widget an ID of wide_front_page_area then the code would be edited to look like the following:

    <?php if ( is_active_sidebar( 'wide_front_page_area' ) ) : ?>
    	<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    		<?php dynamic_sidebar( 'wide_front_page_area' ); ?>
    	</div><!-- #primary-sidebar -->
    <?php endif; ?>

    Also, I’ve looked at the code in other files such as page-templates/front-page.php, but I’m having a hard time figuring out what parts of the code I can use as a template to create what I need – I’m trying to make a full width row with 4 columns.

    Do you see the <?php get_sidebar( ‘front-page’ ); ?> function in that file? If you navigate to the parent theme’s sidebar-front-page.php file, you will find the code for the current three widgets on the theme’s front page. You could use the code for those three widgets as a template for creating the four you want.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Adding full width image to the homepage’ is closed to new replies.