Working With the Infinity WordPress Theme

Aug 15, 2008 | 10:15 pm

Working With the Infinity WordPress Theme

WordPress Theme Infinity

*NOTE* From the Theme Author: On Aug 18th – Infinity 1.0.1 WordPress Theme has been released, it is highly recommended that you upgrade at your convenience, especially if you’re need WP page template which was missing in previous version. Enjoy.

The Infinity WordPress theme was featured on Smashing Magazine last week and had a great setup for a portfolio style site as the theme uses thumbnails as visual representation for all your posts/pages.

The theme was designed by Zhang Yichi, the creative mind behind Vikiworks Studio from Shanghai, China especially for Smashing Magazine and its readers.

I decided to visit Zhang Yichi’s site and leave a comment of how great this layout was, didn’t read through the comments but noticed the last two comments on how to add a link to the navigation for a “About” page. I gave my input but after I posted, a reader named “inty” brought up an issue when trying to open any page created when using this theme.

@Gabe Diaz
This method does not work with this theme.
It displays a miniature of the page, not the page.
And you can not click on the thumbnail to see the page …

Let’s fix this…here’s what we’ll do for a workaround:
1. Create an About Page
2. Add a link to your About page to the top navigation
3. Fix the issue of viewing your newly created page
4. No more issue…we hope!!!

Hopefully you already know how to create a WordPress Page, if not go to Write/Pages and start typing away…in this case we are creating an About page so we will label the title “About” and our URL for our page will be http://yoursitename.com/about

Now go into your WordPress Design Tab, select Theme Editor and then make sure you highlight Header(header.php) so that it appears in your edit box.

Scroll down till you see the list below, this is your current menu as written by the theme author.

<ul class="topnav">
<li><a href="<?php echo get_settings('home'); ?>/" title="Return to Frontpage">01. Home</a></li>
<li><a href="http://vikiworks.com/" title="About">02. About Me</a></li>
<li><a href="http://vikiworks.com/" title="Contact">03. Contact</a></li>
<li><a href="#main-wrapper" title="Contact">04. Skip to content</a></li>
<li class="rss"><a href="http://feeds.feedburner.com/vikiworks" title="Subscribe RSS">RSS</a></li>
</ul>

Let’s have our menu link appear at the end of the current menu, so what I did was copy one of the previous lines and paste the code after “04. Skip to content” and made the appropriate changes. My new line has bloginfo(‘url’) in the a href because that small line of code will spit out your site url and since we follow it immediately with a /about the link will read http://yoursite.com/about

Wordpress Infinity Theme Navigation

You are adding one line for every new page you wish to add to your main navigation, in this case it’s line #6:

<ul class="topnav">
<li><a href="<?php echo get_settings('home'); ?>/" title="Return to Frontpage">01. Home</a></li>
<li><a href="http://vikiworks.com/" title="About">02. About Me</a></li>
<li><a href="http://vikiworks.com/" title="Contact">03. Contact</a></li>
<li><a href="#main-wrapper" title="Contact">04. Skip to content</a></li>
<li><a href="<?php bloginfo('url'); ?>/about" title="Contact">05. Sample Page</a></li>
<li class="rss"><a href="http://feeds.feedburner.com/vikiworks" title="Subscribe RSS">RSS</a></li>
</ul>

You should see the following:

Now we come across the error of when clicking on your newly created menu link, you get a preview thumbnail similar to what it seen on the main page. The reason for this is because there is no page.php file included in this theme and therefore WordPress automatically will use index.php to layout the page. Wordpress uses a specific hierarchy when looking for how to display a page as well as when styling your home page, categories, archive etc. visit the WordPress Template Hierarchy for the complete rundown.

Back to our problem, when you click on your new menu link that is suppose to send you to your About page you will see:

Infinity Theme Navigation

Easy fix…open your single.php file, copy all the code…create a new file, paste all the code from single.php but save this file as page.php and of course upload your new page.php to your wp-content/themes/theme directory.

Wordpress Infinity Theme Single Page

Lastly since this is a static page and if you want to remove the meta(comment/date/category) as well as the comment section go into your page.php and remove:

<div class="postMeta">
<span class="comments"><a href="#comments"><?php comments_number('No comments', '1 comment', '% comments' );?></a></span>
<span class="date"> // <?php the_time('M jS, Y') ?> // <?php the_category(', ') ?></span>
</div>

and

1	<?php comments_template(); ?>

If you read the WordPress Template Hierarchy you will notice that WordPress will automatically use page.php before getting to index.php for your page template. Remember though that page.php will be the template used for all the pages you create, if you want custom templates for different pages you can override page.php and index.php by creating a page-name.php file in this case labeled about.php but you must provide the following in your very first lines of your custom page template:

<?php
/*
Template Name: About
*/
?>

To use a custom page template you just select the name given to your custom page-name.php from a drop down when writing or modifying your page.

Hope this helps!!

77 Comments: Comment or Ping

inty

Hello Gabe Diaz.

Yes!!!!!!!!! It’s works!
I missed the part page.php
Thanks a lot for your help.

If you want to see http://jfr.p.free.fr

Aug 16th, 2008
Tasso

Hey thank you for your help on S.Magazine

here is my question, if i created a page called portfolio.php, uploaded it to my server – I can actually see it in my theme editor…

How can i add the html i want to, to it and actually have it link to one of my menu elementS?

Aug 17th, 2008
Mynk

Wow! Thank U so much ! I like this post, Please mail to me if u change it! Thanks

Aug 17th, 2008
Mynk

Can U help me great sidebar so vikiworks.com
And “Page 1 of 2012345»…Last »”
:-/

Aug 17th, 2008
Chris

Hi Gabe,

Jumped here from SmashingMag. Thanks for takng the time to create such a detailed post, it’s greatly appreciated!

Cheers,

C

Aug 17th, 2008
inty

Hi Gabe,

Thanks a lot for your tuto.
It’s works perfect now.

If you want to see, http://jfr.p.free.fr

Aug 17th, 2008
gabediaz

@inty -

Your site looks great!! Glad the info helped

Aug 17th, 2008
gabediaz

@Tasso -

When you write a page and have a custom page template you will see an option to choose a “Page Template” so you would choose your Portfolio template. Once you have your page working, you can use the technique above in the post to add another link to your top navigation.

Aug 17th, 2008
gabediaz

@Mynk -

This theme needs the PagNaviPlugin so that you see the Page Navigation Page 1 of 10 1 2…..10

Aug 17th, 2008
gabediaz

@Chris –

Hey Chris, I love SmashingMagazine…I find a lot of great things over there and was probably the main reason I decided to really put effort into a portfolio site etc.

Love the card site, was able to find some great inspiration for my new business card!

Aug 17th, 2008
Chris

@gabediaz –

I agree, SM is fantastic. Cardgazer is still a work in progress, I’ve got about 200 more cards to add. Thanks for the kind words!

Cheers

Aug 17th, 2008
Mynk

@gabediaz : Thanks! I was active WP-PageNavi
Help me make sidebar Plz

Aug 18th, 2008
Mynk

I like that sidebar

Aug 18th, 2008
gabediaz

@Mynk –

Would love to help but I don’t know what you want in your sidebar or which one you are talking about when you say you like it.

Aug 19th, 2008
John Williams

Pretty nice site, wants to see much more on it!

Aug 20th, 2008
Frank

I believe everything has been sorted out in the theme now with the addition of this:

<a href=”/” title=”Home”>Home

RSS

Aug 27th, 2008
Frank

Nevermind. tag doesn’t work here.

Aug 27th, 2008
gabediaz

@Frank –

I haven’t looked at the newest release due to time….are people having issues??

DeskofHereos looks awesome!! Can’t wait for the new season, hope it doesn’t disappoint.

Aug 27th, 2008
bobmartien

Hi Gabe.

I have a problems with page adding !
I write “aboute” page (A propos).
I see “about” link on my header but when i clik on this link i have an error:

Parse error: syntax error, unexpected T_STRING in /mnt/102/sdb/8/a/m.dehove/wp-content/themes/Infinity/page.php on line 18

I dont understand, can u help me?

Sry for my bad english :/

Sep 1st, 2008
gabediaz

@bobmartien –

Hi Bob, I just downloaded the new version to look at it. Open your page.php file.

On line 18 you will see:
< ?php endwhile; endif; ?>

Change to:
< ?php endif; ?>

See if that fixes the issue.

Sep 1st, 2008
Chris

@bobmartien – Bob, can you post your pape.php somewhere so we can have a look at the code?

Regards,

Chris
http://cargazer.com

Sep 1st, 2008
Chris

sorry, I meant page.php obviously

Sep 1st, 2008
bobmartien

U can see my page.php

>>> http://m.dehove.free.fr/img/pageerror.txt <<<

Sep 1st, 2008
bobmartien

@gabediaz –

I have an error again with ur code :O

Sep 1st, 2008
Chris

Looks like you may be missing a single quote on line 18. I added one here:

<?php edit_post_link(‘Editer l”article.’, ”, ”); ?>

Sep 1st, 2008
Chris

oops, you might need to add a comma after ‘Editer’,

Sep 1st, 2008
bobmartien

@Chris –

I change for this code:

Error: Parse error: syntax error, unexpected T_ENDIF in /mnt/102/sdb/8/a/m.dehove/wp-content/themes/Infinity/page.php on line 17

Sep 1st, 2008
bobmartien

@Chris –

On line 17… there are nothing…

Sep 1st, 2008
Chris

@bobmartien – Try adding before your endif

Sep 1st, 2008
Chris

oops, the code did not post. Add an endwhile before your endif

Sep 1st, 2008
bobmartien

@Chris –

I change this code:

> Parse error: syntax error, unexpected T_STRING in /mnt/102/sdb/8/a/m.dehove/wp-content/themes/Infinity/page.php on line 18 now

Sep 1st, 2008
bobmartien

@Chris –

?php endwhile; endif; ?

with good syntax

Sep 1st, 2008
bobmartien

@Chris –

It’s strange… on line 18 > there is a div balise :/

Sep 1st, 2008
Chris

I’m not entirely sure what’s wrong. Maybe someone with more php experience would like to chime in here?

Sep 1st, 2008
bobmartien

@Chris –

sry but what is “chime” ?

I have a bad english :O Sry for my multicomment on this post

Sep 1st, 2008
Chris

oh, sorry. It means “to speak up”.

Sep 1st, 2008
bobmartien

@Chris –
NOW IT’S WORK !

I change the code for:

?php endwhile; endif; ?>
<?php edit_post_link(‘Editer le post.’, ”, ”); ?>

I think it was my french traduction who make an error.
I change Editer l’article to Editer le post
I think ” ‘ ” (of l’article) make an error

Thanks for help and sry for spam com :O

Sep 1st, 2008
Chris

@bobmartien – no worries on the multiple posts man, always glad to help when I can.

Sep 1st, 2008
gabediaz

Went out but saw all the comments come to my phone.

Good job guys on figuring it out!!

Sep 1st, 2008
bobmartien

Sry but i have an other problem…

I have WP 2.6.1 french vers and I configure Flickr plugin.

Plugin doesn’t work with 1.0.1 infinity theme + 2.6.1 fr WP ?

Or i’m just… a noob ? XD

Tks for help

Sep 1st, 2008
Chris

I don’t use the Flickr plug-in so I’m not sure about compatibility issues. Also, I never upgraded to Infinity 1.0.1 because I had already heavily customized the first release.

Cheers,

Chris
cardgazer.com

Sep 1st, 2008
Timothy West

Hey Gabe thanks for your comment on my post on this theme…
http://trcwest.com/blog/changing-to-wordpress-as-full-cms-for-my-website/
its really great to have someone saying go for it…

i am going to go get busy with this over the next week and ill give you a shout when i have done some work on this…

i have found wp really great for my blog so far…
http://trcwest.com/blog/

thanks again…

Sep 2nd, 2008
Tony

Hello! I posting on the http://vikiworks.com/2008/08/09/infinity-theme/ site this question…anyone here have any thoughts???

“Hello! Awesome theme…we want to use it and are admittedly php newbs…we have installed WP and followed all instructions to the letter…however, this theme when selected shows the following error:

Warning: load_template(/home/corvus/public_html/wp-content/themes/Infinity/header.php) [function.load-template]: failed to open stream: Permission denied in /home/corvus/public_html/wp-includes/theme.php on line 472

Fatal error: load_template() [function.require]: Failed opening required ‘/home/corvus/public_html/wp-content/themes/Infinity/header.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/corvus/public_html/wp-includes/theme.php on line 472

Is there anyone with insight on why this is? We are stuck. Everything else is installed and I can see all files on our public_html folder, WP is working fine with another theme right now, widgets work, plug-ins are installed.

What gives? Help! Thanks!”

Sep 27th, 2008
gabediaz

@Tony –

Hey Tony, off the bat the error says there’s a problem with the theme.php file…BUT since another theme is working, there was probably an error in the install.

Let’s start with hopefully a simple fix:
public_html/wp-content/themes/Infinity
Is your current theme path but the Infinity Theme once unzipped doesn’t extract in a folder called Infinity…it unzips to a folder called Theme. This shouldn’t be a problem but maybe the header is calling in something in a specific path. You can try uploading “Theme” to your theme directory without renaming it and see if you can activate it.

You could also try to deactivate some of your plugins to see if there is any problem coming from them.

Sep 27th, 2008
Tony

Thanks for getting back…no dice…tried activating and deactivating all the plug ins…downloaded the theme as “them”…same basic error:

Warning: load_template(/home/corvus/public_html/wp-content/themes/theme/header.php) [function.load-template]: failed to open stream: Permission denied in /home/corvus/public_html/wp-includes/theme.php on line 472

Fatal error: load_template() [function.require]: Failed opening required ‘/home/corvus/public_html/wp-content/themes/theme/header.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/corvus/public_html/wp-includes/theme.php on line 472

Check the site: http://www.corvustudios.com with another theme…no problem. Something in that header.php file? The only theme that won’t work is the Infinity theme…I have seen people use it…what gives? I can give you our user/pass if that would help?

Thanks in advance for the hand.

~ Tony

Sep 27th, 2008
gabediaz

@Tony –

It just doesn’t make sense. The warning appears when trying to load header.php because that is the first file of the theme that gets called upon. The error though is stated at being in your wp-includes/theme.php file which I don’t think can be broken if other themes are working.

If it was me, I’d probably open the header.php file for Infinity and start removing lines of code to see if it actually is something in that file. If that didn’t work I’d download the WordPress zip again, extract the files and just upload the theme.php file to the wp-includes directory to make sure the file didn’t get damaged on upload.

Sep 28th, 2008
Tony

I know! It makes no sense!

We have wiped everything clean and tried again…even the public_html folder! Redid the server stuff…redid the MySQL stuff…clean WP…clean Infinity theme…the whole process! I have no idea why this is!

Ahhhhhhhhhhhhhhh!

Sep 29th, 2008
Zinkh

Hi guys! Hi Gabediaz !
Thanks for this useful tutorial, and thanks yichi for this awesome theme, it simply rocks!

But i have a little problem, the theme is really slow to load in IE, i use firefox and it works great on it, but most of the users will be experiencing the site with IE, do you have any clue about this?

Oct 5th, 2008
gabediaz

@Zinkh –

Hey Zinkh!

The slowness in IE is probably due to the png transparency fix that is used. Firefox understands alpha transparency in png’s fine while IE 6 & 7 need help.

Pull the png files to see if that is the problem.

If you want to read up on PNG and IE6 I wrote a quick post on what I use here on my site: Easy Transparent PNG Fix for IE6

Oct 5th, 2008
Tony

Gabe!

We got it to work! Turns out it was a server side permissions error…we talked to our hosting company (local) and they helped us fix the php.ini permissions and viola! Done.

Thanks for all your help!

Best,

~ Tony

Oct 7th, 2008
gabediaz

@Tony -

Hey looks great! Congrats on finally fixing the issue.

For some reason the copy in your posts are right aligned. To normalize, just edit the .entry in your CSS file, you can just remove the float:right;

BTW if you know what was fixed in the php.ini let us know as there could be others out there ripping their hair out wondering WTF is up with this theme’s install!

Oct 7th, 2008
Sergio

Hi,

I’ve installed infinity theme but I have a problem. When I selected this theme in frontpage not show the theme, only I see a blank page. Can you help me?

Thank you.

Oct 19th, 2008
gabediaz

@Sergio -

Check to make sure your not using a static front page. Go to settings/reading to check.

Oct 19th, 2008
Zach

I have setup this theme but I have noticed when I view it in Internet explorer – scrolling down the page is VERY slow and sluggish. Can anyone explain why this is happening? visit my page in IE to see http://www.xtcradiofm.com

Please help if you can.
Thanks

Oct 20th, 2008
Adrian

Hey All !!! I just would like to know what do I have to do to have images as the cover of the thumbnails on the index.php page. I have already posted some contents but the image appears only when I click the empty post thumbnail on the index.php page. Can anyone help? Thanks anyway for the tutorial.

Nov 30th, 2008
Adrian

Is it possible to change the default language ‘English’ for the template into Portuguese?

Nov 30th, 2008
Chris

@Adrian – @Adrian –

In each post, add a custom field named “thumbnail” and then for the value enter the direct path of the image.

Nov 30th, 2008
Adrian

@Chris – Thanks Chris. now the thumbs work just fine!

I’ve installed the theme correctly and almost everything works fine. I haven’t made all the adjustments yet, anyway the big Bug ‘HURDLE’ I’ve been facing is while I try to access the wp infinity template in internet explorer, it starts loading the page and then shows up a fatal error. Firefox loads the site perfectly and gracious! If you or any of the wp manics here!! //just kidding// know something about this, please let me know! Thank you Chris and you all whoi come across this!

Dec 5th, 2008
Chris

@Adrian – What’s the url of your blog?

Dec 5th, 2008
Eric

How do I disable the thumbnail gallery view on the homepage? I just want one big post after another taking up the entire width.

thank you much!

-e

Jan 3rd, 2009
gabediaz

@Eric –

You would basically go into your index.php and make edits to the class=”post” section. I created a home.php and made the edits that I think you were looking for.

You can download the edited theme here(right click/save as):
Edited WordPress Infinity Theme

Check it out, let me know if that’s what you were looking for and of course feel free to get in touch if you have any other questions.

Jan 4th, 2009
Eric

Thank you so much, you really saved me. Worked perfectly!

I’m working on my first wordpress site for a client of mine and am definitely learning as I go.

Maybe you can help out with a couple more if it’s no bother.
1) How do I move the ’sidebar’ from the right to left of the most recent posts.

2) How do I add a column posting the most recent posts from a specifc category?

I’m done I promise!

Jan 4th, 2009
Eric

I was able to switch the sides but as you can see there’s a problem

http://foggedclarity.com/

thanks!

Jan 4th, 2009
gabediaz

@Eric –

Good job getting it to switch sides.

If you want to add a column just put back the 2nd sidebar that the Infinity Theme comes with. I think they are labeled left and right.php or something similar. Once you have the original column up just make all your changes to the column file. Basically you will be using the original structure but with your own content that you wish to display.

As for displaying recent posts check out the WordPress Codex for a bunch of useful info on editing and customizing your install. To display the most recent posts from the category you are in you will probably need to create a custom loop.

There are also a bunch of plugins that will display related posts, most popular posts etc.

Good luck!

Jan 4th, 2009
Eric

Sweet I’ll try that. With your home.php code how do I edit the background color of those post?

And do you know why all my italicized words are being highlighted in wordpress? you been a ton of help thanks again!

Jan 4th, 2009
gabediaz

@Eric -

Couldn’t see any highlighted italicized words but just so you know be careful when copy/pasting content into a page…especially with the Visual Editor turned on. When you copy/paste you are bringing in alot of line breaks along with text formats. Click on the html tab of a post and you will see the extra html you bring in with copy/pasting into the visual editor.

As for the background color, it’s all in the css. The class is either called “post entry” or “post single” you can make your background color changes in there.

Jan 4th, 2009
Eric

awesome! starting to work already. i guess the only question I have left is..

I switched my categories feed to display page feeds but kept the ‘categories’ title, but now it has the word ‘pages’ above my list. how would i remove that?

last question i swear lol

Jan 4th, 2009
Eric

nevermind got it!

Jan 4th, 2009
gabediaz

@Eric –

congrats!

Jan 4th, 2009
zEEROCKz

this one is gorgeous….

Feb 5th, 2009
Anthony

does anyone know how to make the columns wider i cant seem to find it in the code.

Feb 7th, 2009
Christian

Gabe how does one get formatting to work on Pages? I can’t seem to get paragraphs or simple line breaks to work in the visual or html editor.

Feb 21st, 2009
gabediaz

@Christian –

Sorry, was traveling over the weekend with no internet access.

Do you have the theme active somewhere so we can take a look at it? Else have you checked your CSS file?

Feb 23rd, 2009
Christian

Originally Posted By gabediaz @Christian –

Sorry, was traveling over the weekend with no internet access.

Do you have the theme active somewhere so we can take a look at it? Else have you checked your CSS file?

Don’t be sorry. I saw that you were on travel. Here is the active theme: http://adams.sigmacreativeonline.com/?page_id=2

I haven’t checked my CSS file. I wouldn’t know what to check as I am not good with CSS except for simple stuff like changing colors and hover states, etc.

Feb 23rd, 2009
gabediaz

@Christian –

Took a look at your page. Easiest way to quickly see what’s going on is to check your source. Highlight some paragraphs/view source and you’ll see that your page content has the “class=entry.” If you haven’t already installed the Web Developer plugin for Firefox, it’s really useful.

Checking your CSS file you can find the CSS that is used to format text in posts, the lines start with .post.single p just copy those lines and change the class to reflect that used in your pages and you get the following:

.entry p { margin: 1em 0; }
.entry p a,.post.single li a { color:#b3d565; }
.entry p a:hover { color:#ddd; }
.entry p strong { font-weight: bold; }
.entry p em { font-style: normal; background: #f9f9de; }

Your paragraph spacing should work, along with links, bold and italics…let me know how it goes!

Feb 24th, 2009
Lesego

Hi Gabe Diaz,

How do i make my Infinity Themed site Compatible to Internet Explorer 6?

On Internet Explorer 6, my users aren’t able to post comments. The Submit button does not work. U may test it yourself if you want here: http://www.bravesta.co.za.

Secondly, for some reason the Latest Updates section just doesn’t wanna display properly (again, only when browsing using IE6)

Your help would be greatly appreciated.

Lesego’s last blog post..Movie Film: Angels and Demons

May 14th, 2009
Praise And Worship CD

Thanks and keep post the informative sites.

May 26th, 2010