How to modify the Modularity Lite 1.2 from Graph Paper Press

Display Slideshow on pages other than The Blog

By default the Slideshow only gets loaded in the index.php file via the following statement:

This means it will only ever be displayed on your “home page” unless we insert that statement elsewhere. Insert the above code in your page.php file to display the slideshow on all pages, and/or in single.php to display it on every post. Put it right underneath the line

If you’d like to show the sldieshow only on one particular page or post, you need to find out its ID and write a little if…then statement like so:

This statement tests if the page ID is 11, and if it is, the slideshow will be displayed. To find out your page ID, you can go to pages (or posts) and hover your cursor over the one you’d like to query. In your browser status bar you’ll see the post ID as part of the URL.

Displaying more than 5 images in the Slideshow

For this task you’ll need to edit /library/apps/slideshow-static.php – it’ll list 5 images, just add more or use your own file names. The images for the slideshow are stored in the /images subfolder of your theme.

Changing the Height of your Slideshow

There used to be a handy theme option in Modularity LIte 1.1 where you could do that – but I think this has been removed in Version 1.2. Instead, have a look at the style.css file and find the following line of code at the bottom of the file:

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

The min-height parameter is the height of the slideshow, no matter what size your images are. Set it to something like 225px and see the results.

If you’d like to make the entire slideshow smaller, have a look at the very bottom of your style.css file and find the code that styles the slideshow. Replace the height and width values to make the slideshow smaller. I’ve opted for images 400×180 here.

/* Slideshow */
#slideshow {padding:0;list-style:none;margin:0 0 3em 0;overflow:hidden;min-height:180px;}
#slideshow .slide {padding:0;width:400px;text-align: center;min-height:180px; background:none}
#slideshow .slide h4 {margin: 0 0 .5em 0;text-transform:uppercase;padding:0 16px;}
#slideshow .slide img {display:block;max-width:400px;text-align:center;margin:0 auto;}

Note that this leaves some unused space on the right of the slideshow (good for a static logo or some text). You don’t necessarily need to change the size of your actual images on the server, however if you do your images may look a bit better and it takes the client’s browser less work do resize on-the-fly.

Tweaking the Navigation Menu

If you’d like to add or remove items from the Nav Menu, have a look at the nav.php file in the main theme directory. All dropdowns are CSS styled HTML lists, so amending them with your requirements shouldn’t be too taxing.

For example: say you’d like to replace the “Categories” tab with a clickable “Home” tab. Simply replace this code

<ul>
<li><span>Categories</span>
<ul>
<?php wp_list_categories('orderby=name&depth=-1&title_li='); ?>
</ul>
</li>

with this code:

<ul>
<li><span><a href="http://yoursite.com">Home</a></span>
</li>

Hover my Sub Menus

By default, you’ll have to click each tab in order to display the sub menu. If you’d rather display those when you hover, have a look in your style.css file and find the following bit of code:

#nav ul li.drop:hover ul { display: block; }

Then change it to this:

#nav ul li:hover ul { display: block; }

The “.drop” waits for you to click before the menu gets displayed and by deleting it the menu gets displayed upon hovering.

Modify the Credits

The Credits are part of the footer.php file, should you wish to add, remove or amend portions (maybe you want to add your affiliate link to Graph Paper Press). Please note that it’s good practice to give credit where credit is due, and if you’re using a free theme, why not give the author a link to say thanks.

If you’re after a ton of more functions out of the box, consider the full version of MODULARITY by GraphPaperPress. You’ll also get access to support forums and video tutorials on how to set this puppy up.

Have fun 😉

Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.

155 thoughts on “How to modify the Modularity Lite 1.2 from Graph Paper Press

  1. Hi Jay

    I hope you’re doing well.

    My blog is up and running now and seems to be working fine for the basic need I have of it. One question I do have for you if you can help is, how do I create a mailing list or something similar. So that whenever I update my blog etc. everybody who wants to be advised, receives an e-mail?

    If you could let me know that would be great.

    Thanks.

    YBB (now from Toronto, Ontario Canada)

    1. Hello Toronto – how are you doing tonight?

      The easiest way to get this going is via Feedburner. That’s a Google service which reads your site’s RSS feed and generates a new one. It does a lot of other magic like notify search engines when you post, send tweets automatically and let visitors subscribe via email. You can sign up at feedburner.google.com and have a play. I use Feedburner on all my higher traffic sites (including this one – the box in the sidebar is a piece of Feedburner code for example).

      You can also replace your current feed with the new Feedburner feed – some Themes offer this functinoality, but there’s also the Feedburner Feedsmith plugin which does that for you. The advantage is that it takes some load off your server – but you don’t have to go that far if all you want to use is the mailing list function.

      Have fun 😉

  2. im running Modularity Lite and had the slide show running fine when i went to resize my photos it stopped running how can i get the slide show back

    1. Are you running Version 1.3? Have a look at this article I’ve written for it.

      Check what size you’re using for your images: Slideshow images MUST BE exactly 950×425 pixels or larger. Smaller images won’t show up.

  3. Hi Jay.

    Thanks for your help a while ago.

    Have another quick question for you;

    How can I add a link to a specific page (such as to a post) that can only be displayed when the admin is logged in?

    Eg. when the admin is logged in to the WordPress backend, quite a few themes will display ‘Edit’ under each post etc on the front end of the site, but obviously no other user will see that.

    I would like a link to do the same thing for a link so only the admin can see it and click on it from the front end.

    Look forward to hearing your reply.

    Cheers

    Jason

    1. Hi Jason,

      there’s a built-in WordPress function called edit_post_link() which handles that. It displays the “edit” option only when you’re logged in and nothing if you’re not logged in. Modularity Lite supports this at the bottom of every post. You can add this anywhere you your blog where you can execute PHP.

      Here’s the default usage:

      <?php edit_post_link('Edit this post', '<p>', '</p>'); ?>

      Hope this helps 😉

    1. Excellent, glad you’ve sussed it out.

      For those of you who haven’t, you can add the “fixed” parameter to your body definition like so:

      body
      {
      background: url('yourpicture.gif') fixed no-repeat center;
      }

      Take the “fixed” out and the background will scroll up and down.

  4. Hi Jay,

    Thanks for the blog. Wondering if you’ve run into this problem with Modularity Lite: The post images on the main page are not linkable…only the title for each post. Any way around this? Each reference image is indeed set to link to the post page. http://donnapallotta.com/luce025
    Thanks in advance,
    Donna

    1. Hi Donna,

      I’ve just had a look at your link and those images do link fine to the relevant posts. Maybe you’ve already fixed the issue (in which case: well done ;-)) or if the problem still persists try to clear your browser cache. Works wonders sometimes.

      All the best from London!

  5. Hi Jay

    As your previous helps worked out, I would like to ask if it would be possible to divide the blog posts in to 2 or 3 columns in the home page in modularity lite theme instead of the normal blog look. As index.php pulls blog.php I tried to change the loop into column in blog.php but didn’t work properly. If you have any idea, it would be a great help once again.

    Thnx for all the great resources

    1. Hi Nitin,

      that’s a great thought indeed. I can see this working really well for Modularity Lite. Unfortunately it also means a major rewrite of the theme – I’m not sure if I can help with that. Let me think it over though 😉

  6. Have you ever tried to get the slideshow to source images from pages instead of blog posts?

    1. I haven’t… and I wouldn’t know how. Technically a page and a post are the same thing to WordPress, so maybe you just tell Modurality Lite the exact page ID’s you’d like to use for images. But then, that’s just a thought.

      Instead I suggest using the static slideshow option as explained in this article (for Modularity Lite 1.3).

  7. Thanks for all your comments and input on this post.

    Since this is the thread for the 1.2 version I’m going to close this comments section now. I’ve written an article for a newer version of Modularity Lite 1.3 – check it out here.

Comments are closed.