Working With the Infinity WordPress Theme

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.

1
2
3
4
5
6
7
<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

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:

1
2
3
4
5
6
7
8
<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:

Wordpress Infinity Theme Navigation

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

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

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:

1
2
3
4
<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:

1
2
3
4
5
<?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!!

About Gabe Diaz

Gabe Diaz is web professional and consultant focusing on design and development, currently based out of South FL. When not geeking out on the internet you will find him spending time with his children. You can also find him on Google+: +Gabe Diaz, Twitter: @GabeDiaz and Facebook: GabeDiaz.

15. August 2008 by Gabe Diaz
Categories: Blog | 82 comments

Comments (82)

  1. 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

  2. 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?

    • @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.

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

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

  5. Hi Gabe,

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

    Cheers,

    C

  6. Hi Gabe,

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

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

  7. @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!

  8. @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

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

  10. I like that sidebar

  11. @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.

  12. Pretty nice site, wants to see much more on it! :)

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

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

    RSS

  14. Nevermind. tag doesn’t work here.

  15. @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.

  16. 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 :/

  17. @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.

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

    Regards,

    Chris
    http://cargazer.com

  19. sorry, I meant page.php obviously

  20. @gabediaz

    I have an error again with ur code :O

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

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

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

  23. @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

  24. @Chris

    On line 17… there are nothing…

  25. @bobmartien – Try adding before your endif

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

  27. @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

  28. @Chris

    ?php endwhile; endif; ?

    with good syntax

  29. @Chris

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

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

  31. @Chris

    sry but what is “chime” ?

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

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

  33. @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

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

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

    Good job guys on figuring it out!!

  36. 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

  37. 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

  38. 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…

  39. 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!”

  40. @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.

  41. 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

  42. @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.

  43. 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!

  44. 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?

  45. @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

  46. 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

    • @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!

  47. 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.

  48. 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

  49. 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.

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

  51. @Adrian@Adrian

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

  52. @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!

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

  54. 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

  55. @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.

  56. 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!

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

    http://foggedclarity.com/

    thanks!

  58. @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!

  59. 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!

    • @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.

  60. 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

  61. nevermind got it!

  62. this one is gorgeous….

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

  64. 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.

  65. @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?

  66. 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.

  67. @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!

  68. 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

  69. Thanks and keep post the informative sites.

  70. Hey is it possible to take out lets say the right column and expand the single page/ thumbnail main column so that its wider and shows 3 thumbnails instead of 2 per row?

  71. Hey RESZ, ryt it would be great to make it 3 thumbnails… I really wanted this theme i would lyk it to be an arcade site.. i’ll post sooner if i could make it an arcade site but many thing to be fix with this theme. But Praise to you GabeDiaz great great work!

  72. wow this is great, thanks for this nice and informative post. I am using this theme on couple of my blogs, so this certainly will help me a lot.

  73. Hello fellow creative,
    I have a question:
    When posting a new message I don’t have a picture in the home page (using the normal theme which is great by the way). What am I doing wrong?

    Using Safari and Mac OSX currently via MAMP on local server, not yet online (maybe this is why?)

    StV

  74. I’m sorry if it has been mentioned but i haven’t seen it so far.

    I was wondering if anyone knew how to make the pages viewable so where as on a normal wordpress theme you would see pages for the blog at the bottom of the blog pages on this theme there isnt any pages and for our website we need our viewers to be able to go back to older posts.

    Does anyone know how i would fix this so that at the bottom of each page there is links to each other blog page.

    http://www.mustjam.com/

Leave a Reply

Required fields are marked *