• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

8 May - 2015 By Paal Joachim Add a Comment
Last updated on: May 10, 2015

Content starts at the bottom of the page

The challenge is to have content begin at the bottom of the page.
Here is an example:

Content sticky bottom

Content sticky bottom

One can see the gallery building, red phone booth and the site header containing the site title and menu. Resizing the browser vertically moves the site header and everything below it upward (sticking it to the bottom).
Scrolling downward one will see the content below the site header.

Something like this: https://jsfiddle.net/paaljoachim/22rL1oh7/10/

The JS code makes the site header stick to the bottom as is seen above.

 

The Code

functions.php

Inside the child theme functions file:

function stickybottomcontent(){ 
 /* wp_register_style( 'stickycontentcss', get_template_directory_uri() . '/css/sticky.css');
 wp_enqueue_style( 'stickycontent' ); */
 
 wp_register_script( 'stickycontent', get_stylesheet_directory_uri() . '/js/sticky.js', array('jquery')); 
 wp_enqueue_script( 'stickycontent' );
}
add_action('wp_enqueue_scripts', 'stickycontent');

I decided to make a comment tag around the sticky.css. As I really do not need to have a separate CSS file for this as I will be using the site-container class inside my stylesheet instead of adding it to an external CSS file.

sticky.js

I made a sticky.js file inside a js folder located in the root of the child theme folder.
Containing the following code:

jQuery(document).ready(function() {
 $WINDOW = jQuery(window), //define window
 $header = jQuery('.home .site-container'); //in Wrapper of content that will be at bottom
// js function
 function setContainerOffset(){
 $header.css({ top: $WINDOW.height() - 150 }); 
 //$WINDOW.height() is height of browser windw
 } 
 //call function on start
 setContainerOffset();
 //call function on resize of browser
 $WINDOW.resize(setContainerOffset); 
});

Notice the .site-container class tag. The site container is a wrapper containing all the content of the site.
A tip: As I plan on only use the bottom sticky content on the home page I changed .site-container to become .home .site-container.

style.css

Inside the default stylesheet I am using this code for the .site-container (site wrapper).

/* Added code for pushing the container to the bottom of the home page. */
.home .site-container {
 position:relative;
 z-index: 12;
 max-width: 1140px;
 margin:0 auto;
 background: #fff;
}

/* Normal container for the rest of the pages */
.site-container {
 background-color: #fff;
 max-width: 1140px;
 padding: 10px 0px 10px 0px; 
 margin: auto;
} 

After having added the code to the functions file, the js code and the CSS code it worked on my end.

If there is a simpler way of doing this do please let me know.

I received some great help on how to do this through the Advanced WordPress Facebook group.

 

Share this:

  • Email

Categories: Developer, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Leave a Comment Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2019 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.