Creating a footer that sticks to the bottom – WordPress

Using the default theme Twenty Twenty One as an example when creating a sticky footer.

  1. Right click the footer area. Look for the id colophon and class site-footer in the HTML area (left).
    .site-footer will also be seen in the CSS area (right).
  2. Click into the CSS code. Replace the code with the following. (I added red to make the footer stand out in this example.)
.site-footer {
    top: 100vh;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: red;
    padding: 5px;
    margin: 0;
    max-width: 100%;
}
WordPress sticky footer
Crating a sticky footer in WordPress. Example uses the default theme Twenty Twenty One.

Bring the code into the customizer -> Additional CSS section.

4. Specific for Twenty Twenty One.
Remove or hide the Widgets. Add the following CSS.

.no-widgets .site-footer {
   margin-top: 0px;
}

h1 
   font-size: 24px !important;
}

.singular .entry-header {
    border-bottom: 3px solid var(--global--color-border);
    padding-bottom: 0;
    margin-bottom: 0; 
}

Notice that adding the Twenty Twenty One CSS code that the footer is moved further up the page. There is a gap between the footer and the bottom of the page. To remove the gap (from Chrome) we will add CSS to the page content. Explore the code in relation to Firefox, Safari and Opera.

/* Page content area. Could also be body, html or the name of another page content area. */
#page { 
  min-height: 96.3vh;
 }

Here is some code I have used earlier that worked well.
Experiment to figure out what works.

(Page = html, body or the full area of the screen.)
 #page {
 position: relative;
 -ms-word-wrap: break-word;
 word-wrap: break-word;
 /* Sticky footer code*/
 display: flex;
 min-height: 96.3vh;
 flex-direction: column;
 }

(site-content = can also be the .content)
 .site-content {
 padding: 2.5em 0 0;
 /* Sticky footer code*/
 flex: 1;
 }

Based on:
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Here is some other code I used with a theme from (old not updated) Beans Framework to get the footer to stick to the bottom.

html, body {
 font-size: 16px;
/* Sticky */
 margin:0;
 padding:0;
 height: 95%;
 line-height: 1.4em;
 background-color: #000; 
}

/* Sticky code */
.tm-site {
 min-height: 100%;
 position: relative;
 background-color: #fff;
}

/* body/content for sticky footer */
.tm-main {
 padding-top: 30px;
 padding-bottom: 80px; 
}

.tm-footer {
 padding: 10px 10px;
 background-color: #000;
/* Sticky code */
 position: absolute;
 bottom: 0;
 width: 100%;
}

Fixed.
A fixed footer is to fix the footer so that it always remains visible at bottom of the view port of the browser. It will be seen on the top of the content when scrolling the page.

Just add through the CSS add to the footer a position: fixed. It will fix the footer to the bottom.

Resource:
https://jsfiddle.net/juroto/HL6Ad/

Share the article:

Leave a Reply

Your email address will not be published. Required fields are marked *