• Hi there, just a simple question…how does one go about editing the footer in wordpress? If you can kindly view my website http://loyals.info/london/ I have managed to get the image I have made in photoshop, but can’t get it to “sit” on top of the sticky footer? Any help please much appreciato!

    p.s.
    i have inserted a link in the footer.php file to show my image with the following code:

    <img src=”http://loyals.info/wp-content/uploads/2014/07/london-scape-footer-cut-w-white33-transparent.png&#8221; alt=”Image Description”>

    the functions I am after are…
    1, to sit on top of my sticky footer (please note I am using a theme)
    2. align center
    3.it would be extremely helpful if I can incorporate a widget area in my wp, the reason for this is i can add widgets such as cloud tag & newsletter in the footer area.

Viewing 15 replies - 1 through 15 (of 19 total)
  • First of all, the easiest way to display an image in the footer is to use widgets. Now you said that the footer doesn’t have a widget area. Right?

    First of all, the easiest way to create a widget area is to use the code following.

    if ( function_exists('register_sidebar') ) {
     register_sidebar(array(
     'before_widget' => '<li id="%1$s" class="widget %2$s">',
     'after_widget' => '</li>',
     'before_title' => '<h2 class="widgettitle">',
     'after_title' => '</h2>',
     ));
    
    register_sidebar(array(
     'name' => 'Footer',
     'before_widget' => '<div id="%1$s" class="widget %2$s">',
     'after_widget' => '</div>',
     'before_title' => '<h2>',
     'after_title' => '</h2>',
     ));
    
    }

    That is if you want one widget area.

    After you put that in the themes function.php (at the bottom), you will need to put the code to display the widget area in the footer.php in the theme.

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) ?>

    You will want to put that right in between the <div> </div> for the footer container which will look something like this.

    <div id="footer">
     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) ?>
     </div>

    Now for the next step you can add some CSS into your style.css file in the theme (you will most likely want to put it under the footer title (/* Footer Container */) in the style.css).

    /* Footer */
    
    #footer {
     clear: both;
     }

    For more one all this, see http://www.apaddedcell.com/how-create-multi-column-wigitized-footer-wordpress.

    Now about that image??? The best solution for that would be to use the Image Widget plugin.

    Hopefully that helps.

    Thread Starter sky108

    (@sky108)

    thanks for replying to my post, I have tried the above, even managed to register 3 footers in the widget area, & I have dl that plugin, however the image is just hovering above the footer, when I place it in the designated new footer areas it sits in the footer area (as shown here http://loyals.info/london/ )….what I was after is that image to be adjoining & directly connected to the bottom footer?
    Hope this makes sense.

    Can you show me the footer.php?

    Thread Starter sky108

    (@sky108)

    sure, i have assigned 3 sidebars in the footer….

    <?php
    /**
    * Built theme footer with widget area,
    * and wp_footer(). The widget area is called
    * ffooter because ‘footer’ causes issues.
    *
    * @package wpSight
    * @since 1.0
    */

    // Action hook before footer
    do_action( ‘wpsight_footer_before’ );

    // Display footer widget area if active

    if( is_active_sidebar( ‘ffooter’ ) ) {

    // Open layout wrap
    wpsight_layout_wrap( ‘footer-wrap’ ); ?>

    <div id=”footer” class=”clearfix”>
    <?php dynamic_sidebar( ‘ffooter’ ); ?>

    <div id=”footer-sidebar” class=”secondary”>
    <div id=”footer-sidebar1″>
    <?php
    if(is_active_sidebar(‘footer-sidebar-1’)){
    dynamic_sidebar(‘footer-sidebar-1’);
    }
    ?>
    </div>
    <div id=”footer-sidebar2″>
    <?php
    if(is_active_sidebar(‘footer-sidebar-2’)){
    dynamic_sidebar(‘footer-sidebar-2’);
    }
    ?>
    </div>
    <div id=”footer-sidebar3″>
    <?php
    if(is_active_sidebar(‘footer-sidebar-3’)){
    dynamic_sidebar(‘footer-sidebar-3’);
    }
    ?>
    </div>
    </div>

    </div><!– #footer–><?php

    // Close layout wrap
    wpsight_layout_wrap( ‘footer-wrap’, ‘close’ );

    } // endif is_active_sidebar()

    // Action hook after footer
    do_action( ‘wpsight_footer_after’ ); ?>

    </div><!– #outer –>

    <?php
    do_action( ‘wpsight_after’ );
    wp_footer();
    ?>

    p.fimage {
    line-height; 12px;
    margin:auto;
    left:0;

    p.fimage a img {
    margin: 0 auto; padding: 0 0 0 12px;

    </body>
    </html>

    Thread Starter sky108

    (@sky108)

    coincidentally the original footer file for the theme, which i have a back up for, is as follows….

    <?php
    /**
    * Built theme footer with widget area,
    * and wp_footer(). The widget area is called
    * ffooter because ‘footer’ causes issues.
    *
    * @package wpSight
    * @since 1.0
    */

    // Action hook before footer
    do_action( ‘wpsight_footer_before’ );

    // Display footer widget area if active

    if( is_active_sidebar( ‘ffooter’ ) ) {

    // Open layout wrap
    wpsight_layout_wrap( ‘footer-wrap’ ); ?>

    <div id=”footer” class=”clearfix”>
    <?php dynamic_sidebar( ‘ffooter’ ); ?>
    </div><!– #footer–><?php

    // Close layout wrap
    wpsight_layout_wrap( ‘footer-wrap’, ‘close’ );

    } // endif is_active_sidebar()

    // Action hook after footer
    do_action( ‘wpsight_footer_after’ ); ?>

    </div><!– #outer –>

    <?php
    do_action( ‘wpsight_after’ );
    wp_footer();
    ?>

    p.fimage {
    line-height; 12px;
    margin:auto;
    left:0;

    p.fimage a img {
    margin: 0 auto; padding: 0 0 0 12px;

    <img src=”http://loyals.info/wp-content/uploads/2014/07/london-scape-footer-cut-w-white33-transparent.png&#8221; alt=”Image Description”>

    </body>
    </html>

    /* Footer Image */
    
    <div id="footer-image">
    
    <img src="http://loyals.info/wp-content/uploads/2014/07/london-scape-footer-cut-w-white33-transparent.png" alt="Image Description">
    
    </div><!-- footer-image -->
    
    /* Footer */
    <div id="footer" class="clearfix">
    
    <?php dynamic_sidebar( 'ffooter' ); ?>
    
    </div><!-- #footer--><?php

    Try that in for

    <div id="footer" class="clearfix">
     <?php dynamic_sidebar( 'ffooter' ); ?>
     </div><!-- #footer--><?php
    Thread Starter sky108

    (@sky108)

    Thread Starter sky108

    (@sky108)

    that’s awesome, thank you loads!!! It goes back to the same hovering like position when I center the image, but that’s fine I can work around it in photoshop!

    just one last question regarding the footer…how do you incorporate widgets inside the grey area? the widget areas i have made, when I add a widget they seem to be above the area in question? Ideally would be great to incorporate an email subscriber widget, & telephone address info…I can find widgets for this no probs, but how do you tell the script I want them to be placed in that area right at the bottom of my page?

    many thanks again for the help!

    /* Footer Image */
    
    <div id="footer-image">
    
    <img src="http://loyals.info/wp-content/uploads/2014/07/london-scape-footer-cut-w-white33-transparent.png" alt="Image Description">
    
    </div><!-- footer-image -->
    
    /* Footer */
    <div id="footer" class="clearfix">
    
    /* Footer Widget Area */
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) ?>
    
    <?php dynamic_sidebar( 'ffooter' ); ?>
    
    </div><!-- #footer--><?php

    Try replacing this in for the code

    <div id="footer" class="clearfix">
     <?php dynamic_sidebar( 'ffooter' ); ?>
     </div><!-- #footer--><?php

    It should display the widget area above the sharing stuff in the footer but in the footer.

    Thread Starter sky108

    (@sky108)

    Having problems since the recent wordpress update…my footer image has reverted back into it’s “hovering” position. So much of the same question really, how can I get that image to “stick” on top of the footer? Any help much appreciated, I have tried to copy the above but doesn’t seem to work now?
    Here is my footer.php file:

    <?php
    /**
    * Built theme footer with widget area,
    * and wp_footer(). The widget area is called
    * ffooter because ‘footer’ causes issues.
    *
    * @package wpSight
    * @since 1.0
    */

    // Action hook before footer
    do_action( ‘wpsight_footer_before’ );

    // Display footer widget area if active

    if( is_active_sidebar( ‘ffooter’ ) ) {

    // Open layout wrap
    wpsight_layout_wrap( ‘footer-wrap’ ); ?>

    /* Footer Image */

    <div id=”footer-image”>

    <img src=”http://loyals.info/wp-content/uploads/2014/07/london-scape-footer-cut-w-white33-transparent.png&#8221; alt=”Image Description”>

    </div><!– footer-image –>

    /* Footer */
    <div id=”footer” class=”clearfix”>

    /* Footer Widget Area */
    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer’) ) ?>

    <?php dynamic_sidebar( ‘ffooter’ ); ?>

    </div><!– #footer–><?php

    <div id=”footer-sidebar” class=”secondary”>
    <div id=”footer-sidebar1″>
    <?php
    if(is_active_sidebar(‘footer-sidebar-1’)){
    dynamic_sidebar(‘footer-sidebar-1’);
    }
    ?>
    </div>
    <div id=”footer-sidebar2″>
    <?php
    if(is_active_sidebar(‘footer-sidebar-2’)){
    dynamic_sidebar(‘footer-sidebar-2’);
    }
    ?>
    </div>
    <div id=”footer-sidebar3″>
    <?php
    if(is_active_sidebar(‘footer-sidebar-3’)){
    dynamic_sidebar(‘footer-sidebar-3’);
    }
    ?>
    </div>
    </div>

    </div><!– #footer–><?php

    // Close layout wrap
    wpsight_layout_wrap( ‘footer-wrap’, ‘close’ );

    } // endif is_active_sidebar()

    // Action hook after footer
    do_action( ‘wpsight_footer_after’ ); ?>

    </div><!– #outer –>

    <?php
    do_action( ‘wpsight_after’ );
    wp_footer();
    ?>

    </body>
    <!–Start of Zopim Live Chat Script–>
    <script type=”text/javascript”>
    window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
    d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
    _.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute(‘charset’,’utf-8′);
    $.src=’//v2.zopim.com/?2PcASxxRPk0QamjgPPebmfoTRRP4nb2Y’;z.t=+new Date;$.
    type=’text/javascript’;e.parentNode.insertBefore($,e)})(document,’script’);
    </script>
    <!–End of Zopim Live Chat Script–>

    <script>

    $zopim(function() {
    $zopim.livechat.button.setColor(‘#B20047’);
    $zopim.livechat.theme.reload(‘#B20047’); // apply new theme settings
    });

    </script>

    <script>

    $zopim(function() {
    $zopim.livechat.window.setColor(‘#B20047’);
    $zopim.livechat.theme.reload(); // apply new theme settings
    });

    </script>

    <script>

    $zopim(function() {
    $zopim.livechat.badge.setColor(‘#B20047’);
    $zopim.livechat.theme.reload(); // apply new theme settings
    });

    </script>

    <script type=”text/javascript”>
    $zopim(function(){
    $zopim.livechat.concierge.setName(‘Loyals Of London’);
    });
    </script>

    </html>

    Thread Starter sky108

    (@sky108)

    http://loyals.info/london/

    any help guys, much appreciato!

    /* Footer Image */
    <div id="footer-image">
    
    <img src="http://loyals.info/wp-content/uploads/2014/07/london-scape-footer-cut-w-white33-transparent.png" alt="Image Description">
    
    </div><!-- footer-image -->
    
    /* Footer Widgets */
    <div id="footer" class="clearfix">
    
    <?php dynamic_sidebar( 'ffooter' ); ?>
    
    </div><!-- #footer--><?php

    See if that works in place of the old code. Plus add this to your style.css file in your theme or child theme.

    /* Footer */
    #footer-image {
         padding-top: 2px;
         padding-bottom: 0px;
     }

    This may work. If not, let me know.

    Thread Starter sky108

    (@sky108)

    thanks for the help again but after inserting the above code the image i made is no longer present & instead getting the following code….

    Parse error: syntax error, unexpected ‘<‘ in /home/supafoni/public_html/www.loyals.info/wp-content/themes/wpcasa/footer.php on line 37

    Thread Starter sky108

    (@sky108)

    also if you view that site in mobile mode, http://loyals.info/london/favorites/
    the weather plugin i made which sits at the bottom is not responsive to mobiles….if you can fix these little niggles ‘ll give you a tenner & i’ll make you my “go to” guy πŸ˜€

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Or even better hire someone http://jobs.wordpress.net – Discuss payment here and your thread will be closed.

Viewing 15 replies - 1 through 15 (of 19 total)

The topic ‘customizing footer’ is closed to new replies.