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.
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
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:
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:
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!!
Comments (82)
Is it possible to change the default language ‘English’ for the template into Portuguese?
@Adrian – @Adrian –
In each post, add a custom field named “thumbnail” and then for the value enter the direct path of the image.
@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!
@Adrian – What’s the url of your blog?
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
@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.
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!
I was able to switch the sides but as you can see there’s a problem
http://foggedclarity.com/
thanks!
@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!
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.
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
nevermind got it!
@Eric –
congrats!
this one is gorgeous….
does anyone know how to make the columns wider i cant seem to find it in the code.
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.
@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.
@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!
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
Thanks and keep post the informative sites.
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?
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!
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.
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
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/
← Older Comments