Throughout this six-part beginner-to-master series, we'll be using the advanced features of WordPress to create our own portfolio & blog, complete with an options page, multiple styles and support for the new WordPress 2.7 features. Join Now!
This fantastic series will be separated into two sections on Net Plus. Today, you'll gain access to Parts 1-3. In two weeks, 4-6 will be released! Don't miss out.
Overview
By the end of this series, we will have created Innovation – a premium-quality WordPress template perfect for showcasing a portfolio and hosting a blog; complete with the following features:
- Options page for handling the advanced nature of the template, without having to edit any files manually.
- 3 built-in colour schemes – with easy switching between them.
- Homepage and Portfolio page templates, with a widget-ready footer and sidebar.
- Compatibility with WordPress 2.5+.
- Threaded & paged comments support for WordPress 2.7.
- A custom widget for displaying your latest posts, with a preview image, on your homepage.
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called "TUTSPLUS". For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you'll learn from some of the best minds in the business. Join today!
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Philo March 25th
Great!
Might signup for tuts+
( )lawrence77 March 25th
I really need that?
Any plus members here?
( )Nate March 25th
Me.
Brenelz March 25th
I am as well… I would suggest it for anyone
Philo March 25th
Just became one ^^
lawrence77 March 25th
Then feel free to send me this files to my mail!
lol 
laranz.joe@gmail.com
josheat March 28th
Cheap
Jarryd March 29th
Yup.
RICARDINHO April 1st
IM PLUS SORRY GUYS I WILL TELL YOU HOW GOOD IT WAS
Diego SA March 25th
Maybe this tut make my skills for develop a WP template get better!
( )Unfortunately I’m not a tuts+ member…
Zohaib March 26th
then it think we should join because WordPress is gerring better and better with lots of news enhancements
( )Diego SA March 26th
Yeas, it’s true, but the problem is money!
Everybody! I’m accepting donation! hehe!
Vincent D'Amico March 25th
this is something worth while.
( )dronix March 25th
sounds good. Hope it’s in video format.
( )Chris Simpson March 26th
i think i heard that *all* tuts+ PLUS articles have an accompanying screencast
( )Dan Harper March 26th
Most net+ tutorials also have a screencast, however this series does not.
( )ThaClown March 25th
You guys keep amazing me..
Since I have found NETtuts, VECTORtuts, PSDtuts and InTheWoods I am learning
CSS, XHTML, JQuery, PHP and WordPress!!
Keep them coming, i’m addicted
( )Lawrence77 March 25th
me too!
( )Chris March 25th
Think this will be my reason to join. Will these be always on Tuts+ ? they wont be removed after a period of time?
( )Sirwan March 25th
yeah this is worth +plus membership.
( )Joel March 25th
ok, this one put me over the edge. I’m signing up tonight.
( )Joe Dearman March 25th
This promotion has roped me in to a tuts+ membership. Well done!
( )Koistya `Navin March 25th
Good materials. Where do you grab them?))
( )Nate March 25th
They make em.
( )Kevin Jensen March 25th
This is nice! =D
( )SX March 25th
Yeah, i might join as well. Jeffery, it would be great to have a listing of all the plus tutorials in one place, so we can see what we can look forward to if we sign up.
Thanks.
( )wi-Design March 25th
Actually there is a place: http://tutsplus.com/
Shows the listing of tutorials for the + membership
( )wi-Design March 25th
Sorry, this information isn’t correct, my apologies
Philo March 25th
Purchased Tuts+, Great tutorial so far!
( )Vikram Haer March 25th
I miss the really awesome free tutorials. ever since nettuts changed to part of tutsplus, barely any good free tutorials have come out. I know its wrong of me to expect to get such in-depth knowledge for free, but I always really appreciated it and can’t really afford to pay the tutsplus fee. I know its not a lot, but its an additional expense I can’t really spare right now.
( )NinoHarris April 14th
You can’t afford $9 a month?
( )Just save up your pennys and youll have enough in no time
Verious Smith III March 25th
Haven’t joined Tuts+ yet but this one sure tempts me to do it.
( )Nate March 25th
I’m glad I signed up for Tuts+!
( )Dan Harper March 25th
Hope you guys like the series, a lot of effort was put into it!
And hopefully this wins even more of you over to the tuts+ programme, as once the end of the series is posted, as well as having access to all the fantastic tutorials already on the tuts+ network, you get a quality WordPress theme along with it!
All that for $9
( )Jiert March 31st
Dan,
I just signed up as a plus member, and I’m really looking forward to your tutorial. I’m a bit confused though. I’m sure I’m missing something, but where are the tutorials themselves? I have the source files, but can’t for the life of me see where the tutorials are.
What on earth am I missing?
thanks,
( )Jiert
Jiert March 31st
found it. Nevermind, thanks.
Jen March 25th
I have been thinking about joining for a while, and this has me signed up!
( )You guys rock.
Cristhian Bedon March 25th
Seems it would be a great tutorial, nice design there.
( )Tanax March 25th
I just gotta say; Awesome wordpress logo you got there for the tutorial image!
( )Michael Rice March 25th
This is nice, and really tempting to get the membership now!
( )Jarod March 25th
Fine! I’ll sign up already. Jesus, you don’t have to be so demanding.
( )Muhammad Adnan March 25th
i really appreciate your effort !
( )i will signup for tutsplus soon !
old member March 25th
Lately good tutorials are on tutsplus only. Now for free users u post stuff like “10 Rare HTML Tags You Really Should Know”, “The Easiest Way to Use Any Font You Wish”, “Internet Explorer 8 Essentials”, “How to Add Variables to Your CSS Files”… nettuts policy changing?
( )old member too March 26th
Yes learning should be free for anyone!
I think the reason why the tut isn’t free is the overall “Wordpress Hype”.
Hyper,Hyper…thank god the net is full of useful infomation and this tut is not an exceptional offer.
( )Matt March 26th
Amazing, this made me sign-up. Looking forward to the rest of the series.
( )insic March 26th
this is nice.
( )Thomas March 26th
Wow, this makes it very tempting for me to sign up for tutsplus!
How would a plus member rate this tutorial ?
( )Rank Higher, Make Money! March 26th
looks like this will be pretty good!
( )Adel March 26th
Great deal .. i was trying to register for + membership but i could not, is ther another way than the paypal one? paypal asks me to register and put funds in my account. but he did not accept my master card.
( )please respond.. i need this
john Dangerous March 26th
Sweet, this will hold me till the Wordpress tuts pick up again. That plus membership is worth its weight.
( )Wicky March 26th
Exciting stuff. I registered as a result and followed the tutorial, however, there seems to be an issue because the homepage loop (day 2) is not drawing in the latest projects as it’s supposed to.
It might be an error on my part, but I’ve copied and pasted the code form the tut twice. Can anybody else confirm this?
( )Dan Harper March 26th
I ran through the tutorial & code myself a few times before submitting, and didn’t come across any problems.
Are you sure your portfolio items are in a ‘Portfolio’ category, and that category is selected in the admin panel?
( )wicky March 26th
Nup, can’t get it working. I’m fairly new to WP, so that might be it. Sorry!
Both posts have the portfolio category ticked, but I’m not sure what you mean by “….and that category is selected in the admin panel..” ?
I uploaded the image and it’s created 3 thumbs in the upload directory 150×150, 300×129 and 930×400.
I’ve tried both relative links and absolute, but no joy.
Any ideas?
Dan Harper March 26th
In part 1 you create your theme’s Admin panel (the Innovation menu item in your Dashboard.) Make sure on that page you have filled in the correct options.
Wicky March 27th
Sorry, misunderstood. Yes, it’s all setup as per your tut.
Dan Harper March 27th
Hm… I’ll look into it. Anyone else having this problem?
What version of WP are you running? And what sort of server are you running on? If it’s a localhost, what software packages are you running (eg. XAMPP, MAMP, WAMP etc.)
Dan Harper March 29th
See http://bit.ly/yAeG2 for why this is happening. Sorry.
Tarek March 26th
Signed up to Tuts+ Awesome!
( )Wayne Shears March 26th
Has anyone actually got this tutorial to work. I’m on part two and the styles are not coming through.
Any one able to help me out?
( )Patrick March 26th
My WordPress eBook may help some of you.
( )c man March 26th
Hey Guys,
I hate to say this, but this doesn’t look like it worth paying for.
( )Dan Harper March 26th
The source files are now included in the download for anyone facing any problems.
( )Raymond Selda March 26th
Great tutorial here guys. You can also do a plus tutorial on building a premium template on using Wordpress as a CMS. Like the ones found on iThemes for eg. Thank you.
( )John March 26th
Hi. Can this tutorial be used to create my own unique design and layout? Or is it more to you recreate the exact design shown above.
I’ve never used Wordpress but I’d like to learn. Will this teach me how to use and build themes for myself and clients?
( )Dan Harper March 27th
The series focuses on creating this template, but you can take everything you learn and apply it to your own design. I did my best to split up pieces of code, and explain what each does.
( )Raymond Lopez March 26th
This makes me An Official Tuts+++++++ Member
( )Thomas March 28th
Dan, I also have a problem with loading in the Portfolio images on the front page. They just wont appear! Just the alt tag as a link.. I’m trying to find the solution, I’ll check your source-code
( )Thomas March 28th
Hmm.. The images work when I upload them to my server using the WP upload, but they wont if I dont.
Guess it works fine now.. Can’t wait for the next parts.. I’m done with these!
( )Dan Harper March 28th
Of course! Sorry, that’s why! The TimThumb script we use to resize images will only work on images at the same domain as the script is on (to stop copyright issues, supposedly.)
Guess I forgot to mention that in the tutorial – sorry!
I’ll get to adding in a piece of code which makes the theme not use TimThumb if your image is elsewhere.
Thomas March 30th
Okay cool, thanks for that!
I must say, can’t wait for part 4 – 6. When will they be posted?
J. Houk April 4th
Hey Thomas, I am having the same problem with this tutorial and would like more information on how you got it to work. Forgive me if the process is incredibly simple, but I’m new to the whole web development thing, and it’s slow learning.
Thanks!!
Cuno Jr. April 5th
I have some problems with that to,
could you please post that piece of code you were talking about? Im kinda stuck in the 2nd part.
nate July 11th
What directory do we put the images for the portfolio-so they will show up on the home page? In the tutorial it has us place the TimThumb script in the inc folder. I don’t understand where we are supposed to put the images so they will work with the script-I surely don’t put them in the inc folder?
It’s not pulling the images no matter where I put them either.
Also my links for the custom fields are not appearing as links.
quocvuong March 30th
Thank you
( )Creadionizor March 31st
Hey I am thinking of becoming a premium member =)
Because i saw this word press beginner to master post…
The problem is that I know how to make a design and stuff in photoshop but I can’t code in css or any other form
Will these tutorials help me code and slice my theme I made?
Please mail me for an answer if that’s not a problem =)
Greets Creadionizor
( )Jash Sayani April 3rd
Wow! Amazing theme… Where can I download it ?
Could not find it on DanHarper.me
( )spin67 April 8th
I have an issue on the first page of the tutorial, wondering whether it’s rights-related:
I can’t load the deepblue.css unless I have it at the root of the styles folder, and not in the deepblue folder.
help?
thx .-)
( )spin67 April 8th
Not a rights issue – I ran an extra chmod, and everything is set to the correct 755 attribs.
( )Dan Harper April 20th
The only thing I can think of is that your webhost has disabled the PHP functions to read directories.
( )Spoof April 29th
Beware. Actually you need to have the ‘deepblue.css’ directly in the /styles/ folder and not in the /deepblue/ one wich is actually only here for the images.
( )I’ve made this mistake at the beginning. Hope it helps.
Jeremy May 3rd
Great tutorial.
My question is the icons on the bottom section for twitter, & flickr. Is there an easy way to get these titles to show the logo as shown in the tutorial screenshots? The tutorial only shows how to get them to plain text and not the colorful logo.
Thanks
( )PKayne May 11th
Where the hell is the tutorial. I have already signed up as a member and I am logged in and it’s no where to be found!
( )Muhammad Adnan May 24th
i finally Join the PLUS membership due to this series .
( )thanks Dan.
Vincent May 28th
I’m still stuck on the 2nd page with the images loading to the page-home.php page. I looked at the source and stuff but I didn’t see any change.
Also, I’ve had problem since page 1, my get_header(); doesn’t work, I’ve been using require(TEMPLATEPATH . “….. whatever
( )Vincent May 28th
Never mind, I had the header.php, footer.php and sidebar.php inside the inc folder with thumb.php.
But, I still have the image problem from page 2
( )nate July 11th
I’m getting multiple errors at the end of part 1-at my admin login page-and afterwards-the dashboard dissapears.
The errors are all related to the header and go as follows:
Warning: Cannot modify header information – headers already sent by
then relates specific lines of code to:
wp-login.php
wp-includes/pluggable.php
None of these php files I have altered.
How should I proceed?
( )nate July 11th
Nm-I figured it out-dam php is so much pickier than regular html and css
I had a couple extra lines at the bottom of my functions.php and that caused my dashboard to disappear!!!
I’m going to have to be extra careful with it. I like tho.
( )binal July 21st
i am not getting how to put option page as shown in the tutorial
please reply
( )Danny July 22nd
I am trying this with the latest wordpress 2.8,
Still none of the posts display!
( )Only the header information appears on the page.
If I load another theme, then it works fine and I can see the posts.
I took your sourcefiles and put that in as a theme on its own and still nothing will display but the information in the header.php file.
So if your version does not work, then what is wrong?
Danny July 26th
My apologies,
It was a rookie mistake for wordpress, but one that I was unaware of. I had not properly linked the page template to the actual static page. As I did not see this I spent untold ages going over the code checking for the error that was blanking the page. As is the case with all mistakes that take you a long time to solve I do not think I will be forgetting this one in a hurry
On to part three
( )ccna4u.org August 1st
Thank for share
( )Cecily August 1st
In part 1 of the tutorial, once you’ve edited functions.php and var.php, the deepblue.css file is supposed to show in the colour scheme pop up menu. However, when I tried this – even replacing my code with the downloadable source code – the colour scheme menu remains empty. I’m using WP 2.8.2. Any ideas why this might be happening?
( )Starstuff August 12th
Yes, same here with the most current WP release. Anyone know why that happens?
( )Starstuff August 12th
Woops, figured it out myself. For some reason all the files had ended up in the /styles folder instead of the root directory of /innovation. No idea how that happened, but moving them back to the proper folder solved my problem.
Cheers.
( )Cecily August 21st
Hm. Mine are in the innovation directory, not styles.
Cecily August 21st
Ah, never mind – I figured it out. I manually moved the deepblue.css file into the /styles directory, intsead of the /deepblue directory where it was hiding.
( )MCEctoCooler August 20th
Totally worth signing up for + . With all the knowledge you gain, it pays for itself instantly!
( )Sid August 20th
OMG awesome guys i get to learn so much from this site.. great guys .. keep sharing..
( )Pol94 October 22nd
Back then it was legal for a teacher to strike children, and we all towed the line at certain grade levels. ,
( )