Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Adam White
Adam White
10,571 Points

Wordpress Development tutorial doesn't address what changes to make if you're not using his exact same theme.

The instructor encourages us at the beginning to consider a premium theme. I have an Elegant Themes subscription and am using the popular Divi theme. The problem I'm running into is that I keep having to problem solve to make his custom code fit my site. It took me an hour to realize that the reason my site was "broken" was that a widget needed to be moved into a different div. Same thing happened in the next tutorial.

Is there a tip to finding out how to figure out the proper place for the custom code? I know this is a bit vague.

For example, I'm at the point where we're adding a custom menu to the footer. And you can see here: http://liveactionliving.com/wordpress/ that the footer is "broken" now.

Thanks

The custom footer code:

<?php /**

  • The template for displaying the footer *
  • Contains footer content and the closing of the #main and #page div elements. *
  • @package WordPress
  • @subpackage Twenty_Thirteen

  • @since Twenty Thirteen 1.0 */ ?>

    </div><!-- #main -->
<footer id="colophon" class="site-footer" role="contentinfo">
    <?php get_sidebar( 'main' ); ?>
    <div class="site-info">
        <?php wp_nav_menu( array('menu' => 'Footer Menu' )); ?>
        <?php do_action( 'twentythirteen_credits' ); ?>
        <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'divi' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>
    </div><!-- .site-info -->
</footer><!-- #colophon -->

    </div><!-- #page -->

    <?php wp_footer(); ?> </body> </html>

3 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

As you gain the skillset, these problems will be easier to spot. It is vague, and really impossible to address changes that may need to be made to a different site. Your only bet is to go through the lessons, learn the processes that will allow you to take adapt to any problems you may have on and actual site.

The best tip I can give to help figure out where to put custom code is just simply experience. As you become more experienced, more of it will fall into place.

In regards to your footer, you have no CSS styles attached to it. Does your theme provide a footer module? Where did you get this code? If your theme provides a footer module with styling, you may need change the HTML structure and add the CSS classes to get the desired output. I can help I think, just need to know more about this.

Adam White
Adam White
10,571 Points
Adam White
Adam White
10,571 Points

I appreciate the encouragement, and it's certainly a great feeling when I figure something out. That code was from the downloadable content that the instructor tells us to copy into our child folder.

I think the classes aren't matching. I was able to center the footer by changing <div class="site-info"> to <div class="container"> and changing something else, but I'm getting confused and a little overwhelmed.

Thanks

This is the original footer.php from the parent theme.

<?php if ( 'on' == et_get_option( 'divi_back_to_top', 'false' ) ) : ?>
    <span class="et_pb_scroll_top et-pb-icon"></span>
<?php endif;

if ( ! is_page_template( 'page-template-blank.php' ) ) : ?>
            <footer id="main-footer">
                <?php get_sidebar( 'footer' ); ?>
        <?php
            if ( has_nav_menu( 'footer-menu' ) ) : ?>
                <div id="et-footer-nav">
                    <div class="container">
                        <?php
                            wp_nav_menu( array(
                                'theme_location' => 'footer-menu',
                                'depth'          => '1',
                                'menu_class'     => 'bottom-nav',
                                'container'      => '',
                                'fallback_cb'    => '',
                            ) );
                        ?>
                    </div>
                </div> <!-- #et-footer-nav -->
            <?php endif; ?>
                     <div id="footer-bottom">
                    <div class="container clearfix">
                <?php
                    if ( false !== et_get_option( 'show_footer_social_icons', true ) ) {
                        get_template_part( 'includes/social_icons', 'footer' );
                    }
                ?>
                        <p id="footer-info"><?php printf( __( 'Designed by %1$s | Powered by %2$s', 'Divi' ), '<a href="http://www.elegantthemes.com" title="Premium WordPress Themes">Elegant Themes</a>', '<a href="http://www.wordpress.org">WordPress</a>' ); ?></p>
                    </div>  <!-- .container -->
                </div>
            </footer> <!-- #main-footer -->
        </div> <!-- #et-main-area -->
<?php endif; // ! is_page_template( 'page-template-blank.php' ) ?>
    </div> <!-- #page-container -->
    <?php wp_footer(); ?>
</body>
</html>

This is the original CSS for the parent footer:

/*---------------------[FOOTER]-------------------*/
/*------------------------------------------------*/

    #footer-widgets { padding-top: 80px; }
        .footer-widget { float: left; width: 225px; margin: 0 60px 50px 0; color: #fff; }
        .last { margin-right: 0; }
            #main-footer .et_pb_widget { margin: 0; }
            #footer-widgets .fwidget { padding-bottom: 15px; }
            #footer-widgets .footer-widget li { padding: 0 0 10px 14px; position: relative; }
            #footer-widgets .footer-widget li:before { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border-style: solid; border-width: 3px; content: ""; left: 0; position: absolute; top: 9px; }
                #footer-widgets .footer-widget li a { color: #fff; text-decoration: none; }
                #footer-widgets .footer-widget li a:hover { color: rgba(255, 255, 255, 0.7); }
#footer-bottom { background-color: #1f1f1f; background-color: rgba(0, 0, 0, 0.32); padding: 15px 0 5px; }
    #footer-info { text-align: left; color: #666; padding-bottom: 10px; float: left; }
        #footer-info a { font-weight: 700; color: #666; }
    #et-footer-nav { background-color: rgba(255,255,255,0.05); }
        .bottom-nav { padding: 15px 0; }
            .bottom-nav li { display: inline-block; font-size: 14px; padding-right: 22px; }
                .bottom-nav a { color: #bbb; }
                .bottom-nav a:hover { color: rgba(187, 187, 187, 0.7); }
Adam White
Adam White
10,571 Points
Adam White
Adam White
10,571 Points

Also, is it important to change his "twentythirteen" in the code to my "Divi"? Thanks