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

Hover shows no response

I'm having trouble with my hover effect. I want an element to only be visible when hovered over, but it's not working as expected. I've considered replacing the i tag with an a, and have also tried using both display: none and display: bloc ...

Whenever I adjust the zoom on my HTML page, it either scrolls upwards or downwards

Is there a way to prevent the page from scrolling when using zoom-in or zoom-out? I attempted using overflow: hidden in the body, but it did not work. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

Customize the background based on the user's choice

Hello, I'm interested in having 5 different backgrounds for users to choose from. I want them to be able to click on a thumbnail and have the site's background change dynamically. Could you please advise me on how to achieve this? Thank you for a ...

I'm looking for guidance on how to merge my JavaScript and CSS files together. Can anyone provide me

As a beginner in web development, I have been looking into combining JS and CSS files. However, explanations using terms like minifies and compilers on platforms like Github and Google are still confusing to me. Here are the CSS files I have: bootstrap ...

Elements refuse to show up in a single line

I've styled two div elements with the properties below: .elem1 { width: 47.5%; margin-right: 2.5%; display: inline-block; } .elem2 { width: 47.5%; margin-right: 2.5%; display: inline-block; } Note: When I decrease the margin ...

What is the best way to customize the color of selected items in a RadComboBox using CSS?

I'm curious if it's possible to modify the "background-color" value for the selected items in a radCombobox. Below is the CSS code I've been using: (Despite being able to change other elements, I can't seem to alter the color of highli ...

Is there a way to bypass cells within an html table?

Creating an online board game and looking to have the cells go around the board. Wondering if anyone knows a way to skip the cells in the middle? Attempted using   but it doesn't seem to be effective. Here is a snippet of the code: #board { ...

Translate CSS into JavaScript while maintaining selector understanding

I am interested in developing a tool that can read a .css file and generate a function that will accept an array of class names as input and output the corresponding styles for an element with those classes, represented as a JavaScript object. This tool wo ...

Guide on incorporating a dropdown menu within a Jssor slider

I am facing an issue with trying to include a dropdown menu inside the Jssor slider. The menu does not drop down when placed inside it. Here is the code snippet: <head> <script src="jquery.js"></script> <script src="jssor.slider.min. ...

Struggling with connecting relative hyperlinks

When constructing a website, I have opted to use relative hyperlinks. The file structure is organized as follows: /root/website1/ All my code resides within the website1 folder. Within website1, the structure looks like this: /css style.css /static ...

Having trouble getting wire:click to work within an if statement in Laravel Livewire

I am currently in the process of creating a popover feature for my website that should open when I click on a phone number. Upon clicking on the phone number, it triggers a function called "startCall" in my Livewire component which sets the value of $calli ...

Manipulate the value of an HTML element's style parameter with jQuery

How do I change an element's style property using jQuery? This is the HTML code I am working with: <div id="template" style="width:200px; height:200px; border:none;">blabla...</div> I attempted to do this: $('#template').attr ...

Allowing horizontal scrolling in a table cell set to full width

I'm attempting to achieve the desired outcome by utilizing the code provided at What I'd like to know is why the scrolling function isn't working as expected. Instead of scrolling, it simply expands the table. To see the difference, try run ...

Utilizing Node.js to dynamically inject variables in SASS compilation

I am currently working on an application where I need to dynamically compile SASS before rendering it on the client side (a caching system is in the works, so no worries there). At the moment, my tool of choice is node-sass and so far, everything is runnin ...

Ways to showcase HTML table in a four-column layout/grid

Delving into Dynamic HTML table creation, I'm currently using jquery for rendering purposes. At the moment, I am only displaying the table. The Goal I aim to segment my table into four columns or a grid structure Something akin to this: https://i. ...

The image has max-height within a max-height container inside a fixed-height container

Here's the scenario: Can an image's max-height property be made to respect the fixed height of an ancestor element that is not its direct parent? I am aware that max-height requires a fixed height for calculation, so this query is distinct from ...

Understanding the Relationship Between CSS Width and Overlapping Elements

Is there a way to make my suggestion div inherit the width of the input field while overlapping the other elements? My current CSS code achieves the overlap effect, but fails to inherit the width of the input field accurately. I have attempted setting the ...

How can I make sure to consider the scrollbar when using viewport width units?

I've been working on developing a carousel similar to Netflix, but I'm facing an issue with responsiveness. I've been using a codepen example as a reference: Check out the example here The problem lies in the hardcoded width and height use ...

Nested Tables in JavaScript: Creating Tables within Tables

Recently, I have been analyzing student data and noticed a recurring structure. While preparing to present information on student performance within the discipline, I also became interested in showcasing a history of new students. It was suggested that hav ...

Looking for assistance in arranging 3 divs next to each other

I'm looking to align three divs side by side, but I can't seem to get them to line up correctly. I've tried using simple CSS, but it's not working as expected. Any help would be greatly appreciated. Additionally, I want these divs to a ...