Customizing the footer on various pages using Footer.php

For the past week, I've been working on updating our mobile site and have encountered an issue with the footer. It loads perfectly fine on the home page but crashes when viewing a regular page. Strangely enough, both pages are using the same footer.php file.

If you'd like to take a look at the staging site where I'm making these changes, visit:

<?php
/**
 * The template for displaying the footer.
 *
 */
?><div class="clearfix"></div>
</div><!-- .site_content .inner-wrapper -->
        </div><!-- .site_content -->
            <?php if(!is_front_page()):?>
<?php if(!is_page(52)):?>
                <div class="page-cta">
<h4 style="font-family: Georgia;font-size: 40px !important; font-weight: bold; color: #075aa0;">Free, No Obligation</h4>
<h5 style="font-size: 40px !important; font-weight: 500; line-height: .6 !important; margin-top: 0px; color: #075aa0;;">Disability Evalution</h5>
<hr style="border-top: 1px solid #39393b; width:90%;">
<p style="font-size: 30px !important;">Let us help you determine if you qualify for disability income<p>
<div style="height:20px;"></div>
<a title="Free social Security Evaluation" href="http://premierdism.staging.wpengine.com/contact-us/free-evaluation/">Free Evaluation</a>
                </div>
                <?php endif;?>
            <img src="http://premierdism.staging.wpengine.com/wp-content/uploads/2016/09/Premier_Bottom_Logos.png" />
            <?php else:?>
            <div class="home-map">
            <div class="inner-wrapper">
<?php
                $args = array(
                    'numberposts' => -1,
                    'post_parent' => 56,
                    'post_type' => 'page',
                    'orderby' => 'title',
                    'order' => 'ASC'
                );
                $children = get_children( $args );
                ?>
                <?php if($children):?>
                    <div class="state-list">
                        <p style="align:left; Color:#a32a2f; margin-bottom:0px;"><b>Click the map below<br>for more state information</b></p>
<hr style="margin-top: 0px; margin-bottom: 0px; margin-right: 0px; width: 570px; border-top: 2px solid #a32a2f;" />
<?p align="left">All 50 states and territories</p>
                        <a href="https://m.premierdisability.com/the-premier-difference/nationwide-disability-benefits/"><img src="http://premierdism.staging.wpengine.com/wp-content/uploads/2016/09/Premier_Map.svg" alt="Premier Disability offers nationwide help"/>
                            &nbsp;
<div class="clearfix"></div>
                    </div>
                <?php endif;?>
                </div>
            </div>
            <?php endif;?>
        <div class="clearfix"></div>
        <div class="site-footer">
                <div class="footer-disclamier">
                  <div class="inner-back">
                        <div class="inner-wrapper" style="background-color: #e3e3e3; width: 640px; margin: -20px 0px 0px -40px; padding: 20px 0px;">
                          <p class="sharelink">Keep in touch</p>
                            <div style="padding-bottom:80px;" class="social relative">
                                <div style="position: absolute; left: 20%;">
                         <a class="block left" href="https://www.facebook.com/PremierDisability" target="_blank"><img src="http://premierdism.staging.wpengine.com/wp-content/uploads/2016/09/Facebook-Icon.jpg" style="width:60px;"></a>
<a class="block left" href="https://plus.google.com/110325482012270783070" target="_blank"><img src="https://m.premierdisability.com/wp-content/uploads/2016/09/GooglePlus-Icon.png" style="width:60px;"></a>
                                <a class="block left" href="https://twitter.com/PremierDisSvcs" target="_blank"><img src="https://m.premierdisability.com/wp-content/uploads/2016/09/Twitter-Icon.png" style="width:60px;"></a>
                                <a class="block left" href="https://www.instagram.com/premierdisabilityservices/" target="_blank"><img src="https://m.premierdisability.com/wp-content/uploads/2016/09/Instagram-Icon.png" style="width:60px;"></a>
                                </div>
<div style="padding: 0px 109px; margin-top: 90px;">
<a href="https://itunes.apple.com/us/app/premier-ssd/id1143571193?mt=8"><div class="applink Apple"></div></a>
<a href='https://play.google.com/store/apps/details?id=com.goodbarber.premierdis&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><div class="applink Google"></div></a>
</div>
                            </div>
                        </div>
<div class="small-disclaimer"><p style="font-size:12px !important;margin-top: 20px;line-height:1.2;"><b>Disclaimer:</b> We are a privately owned, nationwide advocacy service. Any information you receive on this site is not intended to be, nor should it be construed as, legal advice. Using this website or contacting us does not create any type of legal or fiduciary relationship. Premier Disability Services, LLC is neither affiliated with nor endorsed by the Social Security Administration or any other government agency or entity.</p></div>
                    </div>
                </div>

                <div class="copyright">
                <div class="inner-back">
                        <div class="inner-wrapper">
                            <?php Theme::getCopyright()?>
                        </div>
                    </div>
                </div>
        </div><!-- .site-footer -->
</div><!-- #main .wrapper -->
</div><!-- #page -->

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

Answer №1

If you want to make a change, swap out margin-top: 90px for padding-top: 90px right here:

<div style="padding: 0px 109px; margin-top: 90px;">
<a href="https://itunes.apple.com/us/app/premier-ssd/id1143571193?mt=8">
    <div class="applink Apple"></div>
</a>
<a href='https://play.google.com/store/apps/details?id=com.goodbarber.premierdis&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'>
    <div class="applink Google"></div>
</a>
</div>

Answer №2

If you're having trouble with the footer in your PHP file, consider moving it to its own separate PHP file. You can then easily include this file at the end of the page. Many people find this method effective.

To do this, extract the code from the wp_footer() function and save it in a new PHP file.

Next, use the following code to include the new footer file on pages where it is not displaying:

include 'new-wp-footer.php';

Update:

You might also want to try enabling output buffering before including the file so that you can capture and manipulate the content.

Here is an example implementation:

ob_start();
include('footer.php');
$footer_content = ob_get_clean();
echo $footer_content;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a semi-transparent layer to cover half of the canvas while still allowing the canvas to be visible

I'm struggling with overlaying a div on top of a canvas while keeping the canvas visible. Currently, I can only get the div to cover the canvas and hide it. If anyone has an example to share, that would be greatly appreciated. var canvas = document ...

Is extracting the primary image from a WordPress post using raw post data the ideal solution?

I am currently working on a website that needs to showcase the first image from each post in a specific category. Despite having a functioning solution in place, I can't help but feel like there might be a more efficient way to achieve this. Is there ...

Issue with bootstrap accordion not collapsing other open tabs automatically

I'm struggling to incorporate a Bootstrap accordion collapse feature into my project, specifically with the auto-collapsing functionality. In the scenario where there are 3 divs labeled A, B, and C, if A is open and I click on B, A should automaticall ...

Personalize scrollbar appearance in Mozilla Firefox and Internet Explorer

When it comes to customizing the scrollbar in chrome, CSS makes it easy: ::-webkit-scrollbar { width: 7px; } Unfortunately, this method does not have the same result in Firefox (version 38) and IE (version 11). I attempted the following code as an alter ...

How to rename a class of an image tag using jQuery

I need to update the class name in my image tag <img src="img/nex2.jpeg" class="name"> When hovering over with jquery, I want to add a new class to it. After hovering, the tag should appear as follows: <img src="img/nex2.jpeg" class="name seco ...

The div element on my website spans the entire width, yet it appears slightly narrower than the body

My website features a scrolling div element that spans 100% of the screen, but I am encountering an issue with slight horizontal scrolling and the background image extending beyond the visible area. I am striving to adjust the width of the div so that it ...

Prevent your HTML tables from overflowing

I am attempting to create an HTML table with three columns, where I want the first and third columns to have a width of "auto" based on their content. The middle column should then take up the remaining space. While this setup works well when the content ...

Height CSS does not conceal side bar hyperlinks

CSS .nested-menu { .list-group-item { cursor: pointer; } .nested { list-style-type: none; } ul.submenu { height: 0; } & .expand { ul.submenu { ...

Use CSS specifically for codeigniter viewpage

I am unsure if it is possible, but I would like to load CSS and JavaScript within a view page instead of on include.php. Currently, the CSS file is loading on include.php and it is working correctly. What I want to achieve now is to load it directly inside ...

The top navigation menu is positioned above the sidebar menu due to a CSS error

Having an issue with adding top and side menus. The top menu is displaying above the side menu. Can someone help fix the css? Here is my fiddle. I attempted to apply #leftPanel position:fixed but it did not work as expected. ...

Creating a scrolling background effect using HTML and CSS: ``Background Parallax

I'm trying to keep the background of my HTML document fixed in the upper left corner, so that when a user scrolls through the page, they only see parts of it. Here's the code I'm using: <body style="background-image: url(background.png) ...

Is there a way for me to effectively utilize the data from a successful

This is a form validation checker. I'm looking to incorporate an ajax success message feature. After all validations are complete, I would like to display a success message such as "You have successfully signed up". jQuery(function ($) { $(' ...

Choose the first element of its type and disregard any elements nested within it

I need to change the color of only the first p element within a specific div. Using :first-child would work in a simple example, but in my project, there are multiple elements and more could be added in the future. I want to avoid using :first-child alto ...

Showcasing top performers via JavaScript tabs

I have two tabs on my webpage: "Overall Leaderboard" and "Weekly Leaderboard". Each tab displays a leaderboard with different scores. When I click on the "Overall Leaderboard" tab, it shows a leaderboard with specific scores. Now, my question is how can ...

I am experiencing issues with a few of my design choices not functioning correctly

I am facing issues with some of my styles. I have put in a lot of effort, but there seems to be a problem with my menu. The last part of my CSS is not functioning correctly. When hovering over the menu content, I want it to turn black and... #site_menu { ...

Learn how to display a web page in a tab view similar to the toggle device toolbar option

Is it possible to simulate the toggle device toolbar of a web page using JavaScript? https://i.stack.imgur.com/M9oB0.png For example, can we set up a webpage to always display in tab or mobile view like on YouTube? ...

Using Angular to convert JSON data to PDF format and send it to the printer

Currently, I am retrieving JSON data from an API and now need to convert this data into a PDF format for printing. I am encountering an issue where the CSS styling for page breaks is not rendering properly within my Angular component. When I test the same ...

Personalizing Web Push Alerts (Google Chrome)

I successfully implemented a web push notification for Google Chrome using Google Project and Service Worker. One thing I'm curious about is how to customize or style the push notification. The plain message box doesn't quite cut it for me – I ...

Discovering whether a link has been clicked on in a Gmail email can be done by following these steps

I am currently creating an email for a marketing campaign. In this email, there will be a button for users to "save the date" of the upcoming event. I would like to implement a feature that can detect if the email was opened in Gmail after the button is cl ...

Ways to make two blocks of text appear side by side and adapt to different screen sizes

Check out our website imageI'm facing a challenge in making these two text elements appear next to each other rather than stacking on top of each other. Additionally, I need them to adapt responsively to changes in screen size. When 'Icontext&ap ...