If you don’t know this theme yet, you should check it out at Graph Paper Press.
Modularity Lite is Thad Allender’s freebie version of a larger framework. I was customising this theme for Jerry Hyde’s site recently, and thought I’d take some notes to share with you.
I’ve originally written this article for Version 1.1 of this theme. Some of the code blocks have changed locations – please bear that in mind in Versions 1.2 and above!
Slowing Down the Slideshow
Since Version 1.2 of this theme, the code for the slideshow can be found in the functions.php file. Earlier versions have it in header.php.
The slideshow is generated in Java Script. The code block you’re looking for starts with “if ($slideshow_state == ‘On’)”
In it, you’ll find two parameters:
- SPEED which is in fact the cross fade duration,
- and TIMEOUT which is the duration of each slide.
1000 is about 1 second, 2000 is 2 seconds, and so forth. Play with those and see what happens. If you’d like cuts instead of corss fades, change the SPEED parameter to 1.
Display Slideshow on pages other than The Blog
This is a tricky one, but there’s an easy solution as ever.
The slideshow Java Script code is contained in the header.php file, which means it loads on every page – it just doesn’t get activated. Activation for the slideshow happens in index.php, which only gets loaded when blog posts are displayed – not when pages are loaded (because they use the page.php template if available – which it is in this case). All we need to do is to copy this code from index.php into our page.php file and the slideshow will show up on ALL pages.
<!-- Begin Slideshow --> <?php include (THEMELIB . '/apps/slideshow-static.php'); ?>
If you’d like to make it show only on one particular page, find out its page ID and use an if-then statement (I’m explaining this further down in a comment).
Displaying more images in the Slideshow
The file you need to modify for this is /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.
Playing with 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.
Modify the Credits
The Credits are part of the footer.php file, should you wish to add, remove or amend portions (such as 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.
Have fun 
{ 49 comments… read them below or add one }
Good stuff with Modularity Lite. I’m really enjoying it in two columns.
My modifications are calling for management of the slideshow into a smaller size – which I have done. Now, the slideshow is positioned correctly to the left but there is space to the right.
I am hoping to fill up this space with a posted column of text, like a list of dates – as a band would do with their tour dates. I want to post dates + info in small text to the right of the slideshow on only my home page.
I hope to fill up this space with, say
hi Jay
thanks for sharing this useful info!
i’m struggling with trying to do the following: having a static page as my “home” page, and having the slideshow show ONLY on this page.
you’ve mentioned something about a conditioning code which i have no idea how to implement. any chance to get a more specific guidance on this one?
thank you very very much
Hi Shai, as I said in my earlier email, there’s a few steps in accomplishing what you want to do.
First things first: change you Permalink Structure to the default (under Settings – Permalinks, select the first option). We’ll use this to determine what the page ID of your home page is. Then head over to Settings – Reading and have Wordpress display “your latest posts” (don’t worry – we’ll change this back when we’re done).
Next, refresh your site in a new browser tab and navigate to the page you want to use as a home page. See the URL in your browser? It should now read something like
"yourdomain.com?page_id=11"Note down the number it gives you, it could literally be anything. Let’s pretend it’s 11 for this example. Now it’s time to hack some code. If you’re using the internal WP editor, go to Appearance – Editor and select the “page.php” file from the list (make sure it’s writable on your server so you can save your changes). The first line of code you should see is where the file “header.php” is called. We’ll leave that alone. Just underneath that line, insert the following code:
< ?php
if ($page_id == 11)
include (THEMELIB . '/apps/slideshow-static.php');
?>
This will test if the current page is the one we’d like to display the slideshow on (i.e. page ID 11 – change that value to your specific page ID we found out above). Save your changes and refresh your site in the other tab. If all went well, you should see your slidehsow displayed on that very page.
All you need to do now is change the permalink structure back to something sensible (the second option from the top works for me, i.e. “month and name”), and of course set your new slideshow page as the homepage.
Let me know if that works for you
I really like the format that Modularity offers. I’m having one problem. WHen I catagorize a post, then go to that post through the catagory, only the “summary” shows up. I can’t get the summary to expand to the full post. Any suggestions?
Sam
THANK YOU!
it works and you rock!
funnily, i had to enter the code (and of course delete the original –
– with BBEdit, while direct editing with wordpress’ on-board editor yielded some strange results
anyway, it works and i thank you again
p.s.
i didnt got the email btw..
@Shai
Glad it’s working for you
@Sam
What you’re seeing is what’s known as “The Excerpt”, which is an abbreviated portion of your posts. To change that to “The Content”, have a browse through the archive.php file. About halfway down you’ll find a statement that reads
< ?php the_excerpt(); ?>
Change that to
< ?php the_content(); ?>
Now your posts should be displayed as full versions.
Hi Jay, I tried to put the slideshow on all the other pages, however, when the slideshow shows up, it alligns left. Is there a way I can get it centered? Thank you.
Try putting the following tags just before and after the slideshow:
<div align=center>
slideshow source code goes here
</div>
Hello,
Thank you for a fantastic theme!
One question: Is it possible to change the slideshow’s transition effect to a simple switch between photographs rather than a cross fade?
Cheers!
Sean
Hi Sean,
have a look at the SPEED parameter in the block of JavaScript code. Set that to 1 and you’ll have static cuts between each slide.
It looks great…but I’ve been looking for an hour and I can’t find where to put my images for the slideshow. Feeling a little dumb, can you help me?
Hi Audrey,
the images for the slideshow are all in the following folder: wp-content/plugins/modularity-lite/images/slideshow
Hope this helps
Hey Thanks so much for all of your help. But is there a way you can get rid of the Slideshow space altogether? I don’t know how to put the slide show in there and I would rather just get rid of it all together to let my posts appear higher up on the page. Is that possible? Thanx
Thanks Bertburger
To get rid of the slideshow, have a look at the index.php file and delete (or better comment out) the following statement:
< ?php include (THEMELIB . '/apps/slideshow-static.php'); ?>Hello
I’ve inserted, through the modularity admin panel, a 600px wide video in my homepage.
I’d like to make a div float to the right of it, to insert a little description and a button.
How can i accomplish this since the homepage looks to be interely handled by the option in the backend of wp?
Lorenzo,
Assuming you added the video via the Welcome Box feature, this is called in index.php via /modularity-lite/library/apps/welcomebox.php
This will insert and format text only by default, but you can add anything you like here (i.e. your video plus your float box). Share your site when you’re done – I’d love to see the result
PS: lovely music selection you’ve got on 3fingers.com! I’m currently listeing to it
Hey Jay,
thanks a lot, I really appreciate your fast help and I’m glad you’ve enjoyed my playlist
I still got a little (hope so) question for you…I have to exclude a category to be listed inside the navigation bar. I’ve tried to search the “wp_list_categories” inside the nav.php file but it looks like it uses a different function to handle this.
Do you got any suggestion on how to do this?
There are a couple of plugins that will handle this for you. One is called Advanced Category Excluder and the other is Simply Exclude.
I’ve tested both of them and they’re very convenient for that.
Hi Jay,
You have helped me out a bit with your suggestions with modularity lite, however, I’m trying to customize the nave bar at the top. I don’t want the categories tab up there because I can have a widget on the sidebar for that. What I would really like is for each of my pages to have their own tab. Can you get me started on the right track with this?
Thanks!
Your key to success lies in the nav.php file. The entire menu bar is constructed out of unordered lists and sub-lists here. Comment out the the following piece of code to get rid of the categories:
<li><span>Categories</span>
<ul>
<?php wp_list_categories('orderby=name&depth=-1&title_li='); ?>
</ul>
</li>
To turn the entire nav bar into pages you’ll have to comment out everything in that file and insert this code instead:
<div id="nav">
<ul>
<ul>
<?php wp_list_pages('orderby=name&depth=-1&title_li='); ?>
</ul>
</ul>
</div>
Have fun
You are the man! I spent hours trying to figure this out. Thank you so much!
Hi Jay,
I appreciate that you’ve shared your findings. Thank you so much. I found your advice on how to select a single page for the photobox to appear on particularly useful.
I’ve a question.
I’d want to only show top level pages (no parents) in the pages dropdown nav. Eg. I want to hide children pages from appearing on the menu.
If you have time to offer advice, I’d appreciate it.
All the best
Thanks Leif
That’s a good question – looks like it’s easy to do thanks to the wp_list_pages() function which is explained here in some detail. You can pretty much do anything with it, like excluding particular pages. But I digress…
In the nav.php file see if you can find this piece of code – it displays the pages:
<li><span>Pages</span><ul>
<?php wp_list_pages('orderby=name&depth=-1&title_li='); ?>
</ul>
</li>
If you change the “-1″ depth parameter to “1″ you’ll only display top level pages.
Perfect. Thank you for the clear and quick response.
I’ve added my own logo/graphic to the header. I need the logo/graphic to link back to the homepage or get some sort of navigation going in the sidebar where users can click to get back to the homepage. Any suggestions? Thanks in advance.
Hi Kevin,
I imagine you’ve added your header like this: <img src=”header.jpg”>, right? In which case, all you need to do is amend it with an <a> link like so:
<a href="yourdomain.com"><img src="header.jpg">
</a>
Hope this helps
Is there a way to display images only when I post & upload multiple images?
I just want to see the full sized images under the text.
Hi Greg,
yes there is – slightly more hidden than obvious. Have a look at a file called blog.php in wp-content/modularity-lite/library/apps/blog.php. Find the statement that looks like this:
if ($i == 1) {include (THEMELIB . '/apps/multimedia.php');
the_content();
}
else {
the_post_thumbnail();
the_excerpt();
}
What this does is to display the_content() on the first post, and only the_excerpt() from the second post onwards – hence you’re only seeing pictures on your very latest post.
Comment out the last two lines
the_post_thumbnail();
the_excerpt();
and replace them with
the_content();
Now you should see full posts displayed – including all your pictures. Let me know if that works for you
I made that change to the code & now no images show up.
Here’s what I’m trying to do. When I bulk upload images they show up as thumbnails. I want to be able to bulk upload & see full sized images only, no thumbnails.
The only way I have been able to see the full sized images is to upload them 1 at a time as part of the post.
@Greg
Oh that’s what you want to do! That is indeed a Wordpress feature and not a theme issue.
The only way round it would be to use a plugin like Next Gen Gallery and then bactch upload images with that. To display them full size, all you have to do is set the thumbnail size in that plugin to the size you’d like your pictures to appear (say 500px wide).
@Greg
Oh that's what you want to do! That is indeed a Wordpress feature and not a theme issue.
The only way round it would be to use a plugin like Next Gen Gallery and then bactch upload images with that. To display them full size, all you have to do is set the thumbnail size in that plugin to the size you'd like your pictures to appear (say 500px wide).
Hi, I recently moved my blog over from .com to .org and I didnt see how much stress it could be,
I was using modularity lite over at .com I presummed the theme would be exactly the same at .org but its not.
all my posts since I imported them seem to be left aligned or have no alignment at all and are all over the place,
I just want my posts to be left aligned if i set it to be that way or center aligned and etc.
When I use the editor, my post looks exactly how i want it to be, but on the page it is not the same
this is my orignal page at wordpress.com http://andredeveaux.wordpress.com
and this is my new page
http://www.andredeveaux.com
I pretty much want my new page to follow the same format as my old one. seeing as its the same theme
ALSO
The images seem to over lap over the theme design on my self hosted blog… it didnt do that on wordpress.com the overlaping images became hidden.
I dont know whats going on, Ive tried playing about with the style sheet but to no avail, im wondering if it something deeper like a php file
@Andre
I didn’t even know they had Modularity Lite at Wordpress.com. Most likely it’s a Stylesheet issue: I don’t know if WP.com themes get updated as the theme changes, probably due to security reasons. The trouble is that we can’t download the WP.com stylesheet and compare it to the one from Graph Paper Press.
What you could try though is to call the WP.com stylesheets in your self-hosted blog. To do this, have a look at the header.php file and then replace all references in the section under <!– Styles –>
For example, in your self-hosted site you find this code:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/library/styles/screen.css" type="text/css" media="screen, projection" />
Replace that with
<link rel="stylesheet" href="http://andredeveaux.wordpress.com//library/styles/screen.css" type="text/css" media="screen, projection" />
Repeat this for all calls to Stylesheets. There’s no guarantee that this will solve your issues, but it’s something you can try.
Other than that, you may want to have a word with Thad at Graph Paper Press, they have an excellent support forum over there.
Hey Jay, I managed to get a bit further, Im using the Modularity theme now, and I'm more or less done, I've formatted the code so it looks like modularity lite, but the las thing I need help with is, there is a white line going down the edge of the side bar, and the bottom of the page, how do I make that black? also at the bottom it should be double-border.png and a slightly darker grey than the background, how do I do this?
Oh so you're using the Premium Version of Muodularity now? Good man!
I haven't got that theme myself I'm afraid (yet) so can't really help you. Watch this space though, becasue I may invest in it.
However, if you'd like to see what a certain element of your website is called for further styling, I highly recommend the Firebug Add-on for Firefox. With it, you can hover over an element and Firebug will show you the corresponding piece of code. It makes investigaing a lot easier. Happy hunting, and let us know how it works for you!
PS: your site looks VERY cool – well done!
Ah thanks, I'm gonna try that now, and thanks for such a quick reply, I'll probably be back if I get no where…
im stuck again, I tried editing all my Style sheet to match my wordpress.com theme and it made no change at all, so im thinking its something to do with the PHP files, do you know what file could have something to do with the blog text alignment, I think thats where the problem is, once thats sorted im sure it will contain my images too, but the text alignment is the main issue….
Hello. Thanks for all this info. I have tried ModLight in my free WP blog and looked ok then I downloaded and installed it on a paid regular hosting service and I see the version is not the same. The slideshow on the WP hosting shows the images from the latest posts but the downloadable one only show the images in the slideshow folder. The complete function "show images from latest posts in slideshow" doesn't exist. Is this possible? Have you heard of this difference? Am I missing some settings? Thank you very much!!
I\’m afraid you\’re correct
It\’s because the theme has been refined several times after WP.com have integrated it into their version. So the developer can update his theme, but WP.com may not use the latest version due to possible security exploits.
I havent upgraded up to editable CSS yes, but I'm using Modularity Lite and would simply like to remove the transparent container/ layer that hovers over all the images and behind the text. If I get this accomplished, maybe I'd like to change the colors ot text in categoris widget… ty!
Hi Nancy,
I’m afraid I don’t know what you mean… I don’t get any layers over my images
Jay, the new wp theme, modularity lite has a transparent layer that takes up less width than the whole screen but goes slightly over the edges around the page. the text is in front of this layer, but if you put a background image in, it overlays the background image, darkening it. to see my site (an example of that- go to <a href="http://www.fengshuiflorida.com” target=”_blank”> <a href="http://www.fengshuiflorida.com” target=”_blank”>www.fengshuiflorida.com I promise my question makes sense! Have been searching for answer. Thank you!
Hi Nancy, you’ve done some great work to Modularity Lite – it looks so different than the default theme. Cool!
I think I know what you mean now – it’s the grey box that’s all over your content, right? I’ve never noticed this before, but now that I’m looking into this I can see what’s going on. On the original (dark) version, this grey box sets a nice contrast and border around the slideshow and the “container” class. Of course that’s not such a nice effect in your modification.
Have a look at the style.css file and find this bit of code (it’s failry high up under GLOBAL STYLES):
.container {background:url(images/repeater.png) repeat;}This line loads an image with transparency which creates the effect. Delete this line or comment it out for future use.
Eternal Happiness guaranteed
Hi Jay,
Thanks for the tip about changing excerpts to content – it was driving me mad having only excerpts on the index after the first blog post!
My question is, how do I change the width of the container that holds the blog post? Reason being I host my images on Flickr and I’d like to use the image that is 640px wide. If I add the image to my blog currently, it overflows the box by about 30-40 pixels. Also the sidebar is too wide in my eyes, so narrowing the side bar and widening the content box would be ideal. I tried finding out where to change the width of the content box using Firebug but had no luck. Any advice?
Hi Charmaine,
I’ve just had a dig through the code and I can’t find a way to make the sidebar smaller. I can help you with your Flickr images though. Have a look at the style.css file and find the /* Floats & Images */ section, under which you’ll find three declarations:
img.centered...img.alignright...
img.alignleft...
The last value on each line ends with
max-width:950pxChange that to a smaller value and your images will be resized automatically. You may also want to add
heigh:autoto each line so your images don’t get squashed. I don’t know which image alignment you’re using when you embed an image, so for safe measure, amend all three of them. As an example, here’s the first line of code in its entirety:
img.centered{display: block;margin-left: auto;margin-right: auto;max-width:950px; height: auto;}Good luck – and show us your site when you’re done
Hello,
I've been reading others' questions and have been applying many of your solutions to my website, so thank you! I have one simple question. How do I activate the sidebar? I would like to add widgets. Thanks!
Hi Alicia, I’m glad it was helpful
Funny you should ask about the sidebar – I had the same problem a couple of days ago. Under Appearance – Theme Options you can do all kinds of funky stuff, including switching the sidebar on and off.
Jay,
You are such a wealth of information. I wish I had found your site when I first began to use Modularity Lite. Just one question that I can't find a simple solution to. Do you know how to make the nav menu drop down on a hover instead of by clicking on the arrow? Here's my site if you care to look: http://moodydoodles.com/ Thank you!
Hi Amy,
this one took me quite a while to figure out – but like so often the end result is much easier achieved than I thought at first. Have a look in your style.css file and find the following line of code (under the /* Navigation at rest */ section):
#nav ul li.drop:hover ul { display: block; }Change it to this:
#nav ul li:hover ul { display: block; }The “.drop” waits for your to click before the menu gets displayed and by deleting it the menu gets displayed upon hovering.
{ 1 trackback }