How to style Modularity Lite 1.3 by GraphPaperPress

- by

Modularity Lite returns with version 1.3, this time boasting WordPress Menus and a dynamic slideshow option to keep us excited. You can even change colours and your background image. Making it your own was never easier. Here are my notes from when I created minor amendmends for Simon’s website SoundCredit.tv.

My original article on how to style this puppy goes back to version 1.1. With each update, the code has dramatically changed and therefore needs different tweaks. If you’re running an older version of Modularity Lite, check out my instructions for Version 1.2.

Instructions Included

Your first port of call when tweaking this theme is to check out the included instructions. They can be found as handy HTML file in /wp-content/themes/modularity-lite/instructions.html. So if your website is http://www.yoursite.com, and WordPress is installed in your root directory, you can read them browsing http://www.yoursite.com/wp-content/themes/modularity-lite/instructions.html

It’s essential reading. Tells you a lot – but not everything 😉

Dynamic Slideshow

The new dynamic slideshow pulls in images from your last 5 posts and displayes them. For this to work, you’ll first have to enable the slideshow by ticking the box in Appearance – Theme Options.

I had some trouble getting images to show up, so here’s what I’ve learnt:

  • Images need to be associated with posts. If you add them to a page, or if you upload them via the media uploader without associating them to a post, those images will not show up in the slideshow.
  • Your slideshow is 950×425 pixels by default. If you upload images that are smaller than this, they will not show up.

To reiterate: Slideshow images MUST BE exactly 950×425 pixels or larger. Smaller images WILL NOT show up. Don’t ask me why – I’m just the messenger 😉

Slowing Down the Slideshow

Again this has slightly changed from previous versions. Those transition effects are done with something called Jquery Cycle Plugin. For our purposes, we need to have a look at the functions.php file and find this bit of code at the bottom of the file:

jQuery("#slideshow").cycle({
 speed: '2500',
 timeout: '500',
 pause: 1

The “timeout” value is the one we want to change. Change it to 5000 and your slides will show for 5 seconds, 10000 will show them for 10 seconds, etc.

The “speed” value is responsible for the transition duration. The default looks good to me, but try 5000 for sloooower transitions, or even 1 for cuts between pictures.

Static Slideshow

I wanted to build a brochure site with static pages and didn’t need the punch out catalogs,CMS or “posts” part of the website. By default however, the slideshow only displays when you show “your latest posts” on your homepage. It disappears when you show “a static page” (you can select this under Settings – Reading).

My first idea was to only show one post on the front page and be done with it – however this will only display the image from the post shown. Images from Posts that are not shown are not incorporated into the dynamic slideshow. Bugger!

This leaves us no option but to re-write the code that used to work so well in Version 1.2. Let’s do that. First, let’s create a folder for our images:

  • in the theme folder (/modularity-lite/) find the /images/ folder and create a new one called /slideshow/ – just like in the old version you’ll end up with /modularity-lite/images/slideshow
  • find 5 suitable images you’d like to use for the slideshow (950 x 425px or larger)
  • name them “image1.jpg”, “image2.jpg” and so forth amd upload them into the slideshow folder

Next, edit the page.php file and find where the get_header() statement is executed. Right underneath it we’ll call the slideshow images by adding this bit of code:


<?php bloginfo('name'); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('name'); ?>

 

This will rotate our new images on each and every page – no questions asked.

If you would like to use the static slideshow on your “blog” page instead, then insert the above code in the index.php file (again underneath the get_header() statement).

Conditional Slideshow – only show it on certain Pages

Making the above principle of the Static Slideshow conditional is a tad more tricky because it requires more coding; say you have 5 static pages and you only want the slideshow to show up on one of them, that sort of thing. Here’s what you need to do:

  • take the above slideshow code and put it in an empty text file
  • call it “slideshow.php”
  • upload it into the theme’s directory (in our case the full path is wp-content/themes/modularity-lite)
  • find out which page ID you’d like the slideshow to appear on – I’ll explain how this works in a minute

Next, open your page.php file and add the following conditional statement underneath the get_header() statement. For this example, we’ll assume your page ID is 11:


This snippet will check if we’re on the right page, and if that is the case it loads the code from above via the file you’ve uploaded. If we’re on any other page it simply ignores the file and no slideshow is displayed.

To find out your page ID, go to Pages and hover your mouse over the page titles. Keep an eye on your browser status bar at the bottom – you’ll see the value change where it says “…?post=11” – that number is your page ID.

Changing the Slideshow Height

Would you like to adjust the height of the slideshow? That’ll turn it into animated headers – very swish indeed! All you need to do is take a look at the style.css file and find the following snippet (it’s towards the end):

/* Slideshow */
#slideshow {
 padding: 0;
 list-style: none;
 margin: 0 0 3em 0;
 overflow: hidden;
 min-height: 425px
}

Adjust the min-hight parameter to something like 200px and your slideshow loses some height. Regardless of how tall your pictures are they will be cropped automatically (and free of charge… nice!)



If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

231 thoughts on “How to style Modularity Lite 1.3 by GraphPaperPress”

  1. I AM using 1.3 (yup!)

    My header php file contains the following:

    <?php
    /**
    * @package WordPress
    * @subpackage Modularity
    */
    ?>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <!–[if lte IE 6]>
    <html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>
    <![endif]–>
    <!–[if !IE]><!–>
    <html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>
    <!– <![endif]–>
    <head profile=”http://gmpg.org/xfn/11″>
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

    <title><?php wp_title(); ?> <?php bloginfo(‘name’); ?></title>

    <!– Styles –>
    <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_url’); ?>” />
    <link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/css/print.css” type=”text/css” media=”print” />
    <!–[if IE]><link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’); ?>/library/styles/ie.css” type=”text/css” media=”screen, projection” /><![endif]–>
    <!–[if lte IE 7]><link type=”text/css” href=”<?php bloginfo(‘stylesheet_directory’); ?>/library/styles/ie-nav.css” rel=”stylesheet” media=”all” /><![endif]–>

    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

    <?php if ( is_singular() && get_option( ‘thread_comments’ ) )
    wp_enqueue_script( ‘comment-reply’ ); ?>

    <?php wp_head(); ?>

    </head>

    <body <?php body_class(); ?>>
    <div id=”top”>

    <!– Begin Masthead –>
    <div id=”masthead”>
    <h4><a href=”<?php echo home_url( ‘/’ ); ?>” title=”<?php _e( ‘Home’, ‘modularity’ ); ?>”><?php bloginfo( ‘name’ ); ?></a> <span><?php bloginfo( ‘description’ ); ?></span></h4>
    </div>

    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘container_class’ => ‘main-nav’ ) ); ?>

    <div></div>
    </div>

    <div>
    <div>

    <?php if ( get_theme_mod( ‘header_image’ )) :
    if (!is_home()) { ?>
    <div id=”header-image”>
    <img src=”<?php header_image() ?>” width=”950″ height=”200″ alt=”” />
    </div>
    <?php } endif;

    Bean
    ?>

  2. I would like to add comments to one particular page on my website: http://www.loudog.co/englishbulldogbreeders but am not sure how. I found some other tutorials, but they all seem to be for 1.2. Can you help? Also, I’m getting this error on each page of my site that’s visible to everyone. Any ideas on how to fix it?

    Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘http://www.loudog.co/home2/wp-content/uploads/2011/03/Lous-header.jpeg’ was given in /home/melall4/loudog.co/home2/wp-includes/plugin.php on line 395

  3. Hi Melissa,

    you can enable comments per page or per posts. Edit the page in question and find a tickbox at the bottom under Discussions called “Allow Comments”. Tick it and update the page.

    Not sure what that error message is about… sorry!

  4. I thought as much 😉

    Phew – you had me stumped there for a moment: my test site was behaving just as we wanted it… but then I realised that I wasn’t using a static page as the front page, I was using the default blog posts. Hence the is_home() function isn’t working – we need to use is_front_page() instead.

    Try that and it’ll work a treat!

    Should you ever decide you want to display blog posts instead of a static page as your front page is_front_page() will still work fine.

Leave a Comment!

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