Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Adobe Digital Marketing

Spiff Up Your WordPress Site with the Jetpack Plug-In

  • Print
  • + Share This
  • 💬 Discuss
From the author of
Dive into the advanced features of the Jetpack plug-in to give your WordPress website some extra oomph. Jessica Neuman Beck, coauthor of WordPress: Visual QuickStart Guide, Third Edition, shows how to set up the Infinite Scroll, Single Sign On, and Mobile Theme Jetpack modules.

It's easy to give your WordPress site more than just basic functionality. The WordPress Jetpack plug-in provides modules that free up movement on the page, let users sign in with a single WordPress login, and enable compatibility across multiple device types.

Setting Up Infinite Scroll

Sites like Tumblr and Facebook don't bother with such pesky things as page breaks—you can scroll forever (or until you run out of content). To set up your WordPress site to do this takes just a few code modifications.

First, you'll need to add support for Infinite Scroll to your theme:

  1. Open your theme in an FTP client.
  2. Open the functions.php file.
  3. Add the following code (see Figure 1):
  4. /* Add Support for Infinite Scroll */
    add_theme_support( 'infinite-scroll', array(
        'type'           => 'scroll',
        'footer_widgets' => false,
        'container'      => 'content',
        'wrapper'        => true,
        'render'         => false,
        'posts_per_page' => false,
    ) );
  5. Save your newly revised functions.php file.
  6. Figure 1 Add this code snippet to your functions.php file to provide support for Infinite Scroll.

Now you need to activate Infinite Scroll:

  1. In your WordPress admin section, click Jetpack.
  2. Find the Infinite Scroll Jetpack widget and click Activate (see Figure 2).
  3. Figure 2 Click Activate to start the Infinite Scroll module.

Now you need to create a new Template Part:

  1. Open your theme in an FTP client.
  2. Inside your main theme folder, create a new file called content.php (see Figure 3).
  3. Figure 3 Create a new file where your post generation code will reside.

Next, find the post generation code in the WordPress loop and replace it with your new Template Part so that the Infinite Scroll code can work. Here's how:

  1. Open the index.php file in your FTP client.
  2. Find the post generation code (see Figure 4). It will be between the start and end tags for the WordPress loop:
  3. <?php while(have_posts()) : the_post();
    **code for creating posts**
    endwhile; ?>
    >

    Figure 4 Copy the portion of the WordPress loop that generates a post and paste it into your new file.

  4. Copy the post generation code and paste it into your new content.php file.
  5. Go back to your index.php file and replace the post generation code with the following code, which will load your new Template Part (see Figure 5):
  6. get_template_part( 'content', get_post_format() );
  7. Save your changes.
  8. Figure 5 Replace the portion of the WordPress loop that generates a post with the call to load your content.php file.

Your site now supports Infinite Scroll!

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus