Premium Wordpress Design (Part 8)

Part 1 of the Wordpress Integration

March 7, 2009 by Gary Simon

This is part 1 of the wordpress integration.  In this tutorial we integrate the background, header and a portion of the main left content area.  As always, there’s a severe lack of quality control here since I have a “No editing” policy (because I’m lazy) featured in the later portion of the video — But, I get through it and all ends well. :)

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

Tom
March 8, 2009

your problem about the theme bla bla, when you renamed… it is that you were calling to 2 files in your header link for css, and there was just one… try first delete the link for main.css, and the rename main.css to style.css

Anyway, it could be an admin problem, but I dont think so… so try it and tell me :)

You are going well but this is so… aweful, you need to stop recording until you know what is the issue, to let us dont waste our time… just an advice, you can take or left it.

Gary Simon
March 8, 2009

you’re probably right about the header include issue. and I was initially going to respond to your last bit by saying “i’ll left it”, but actually I didn’t take into consideration until now that there’s a pause button ;) before this point I was under the assumption that I’d have to edit the video *after* recording, meaning it’d waste a lot more time. but now perhaps i’ll just pause that shit.

Tom
March 8, 2009

Yup! that was what I try to say… because I saw in a video of themeforest blog, the man said… oh fu/k i have a problem, i will fix it, when i come back, i’ll tell you what i did. and just pause it and started again… that makes things better :D

woot
March 8, 2009

Downloading it now. I understand folks like video co-pilot et al, have simple tutorials that are embedded into their own site so people will have to return again and again (thus increasing traffic) to watch that same video. Its the same gimmick here, but I download it anyhow.

Cheers mate!

Tyler
March 8, 2009

TY GOD! 8 is finally here! tytyty!

Michael
March 8, 2009

can’t wait to see the video.

Michael
March 8, 2009

Tom The Shit is free shut up and just watch or go the F$%# away. jk

at least he has a cool blog online.

Michael
March 8, 2009

loved it. and wait to see the in depth stuff.

do you know any PHP?

Arvind
March 9, 2009

Nice tutorial Gary..

storm
March 13, 2009

Pretty good actually. Not the best, but a great start I think. I prefer it natural anyway.

I think you should have left the blow-by-blow of the graphic design to a photoshop tutorial site (you could have spent 10 min on why you put elements around and how it affects the slicing and programming side of things), and gotten onto the slicing up/programming side of things, which is what I`m looking forward to.

cheers

storm
March 13, 2009

ok, I`m not altogether sure how I got from the page I was looking at (the first video it seems which I thought was the only one), to commenting on this page.

So, now I can get stuck into the other tuts where you get into the meat.

Cheers!

bigal
March 13, 2009

Thats the shit right there!!!! Great blog. Great tutorial. Keep it up man thats some freakin good work on here.

Al

CJ
March 13, 2009

Great set of tutorials!

I just happened upon this site while looking for fresh design ideas. Needless to say, I’ve been absolutely impressed with the WP theme tutorials.

As far as “quality control”, this may not have been as efficient and systematic as the others, but it’s almost better that way. In this way, you can observe how a developer might approach a problem he’s not quite sure about. That in itself is invaluable experience. That being said, I’d encourage you not to pause the film for future releases. But either way, theres some invaluable lessons to be learned here.

Keep up the great work!

PZ
March 27, 2009

Hey man, love the videos they are so helpful!! I always tried to do waaay too much with the graphics instead of facing reality that I’m really not too artistic and therefore not too great with graphics. Seeing how simple you make your designs and seeing them still come out beautifully really inspired me to get started on a project I’ve had sitting here for awhile.

This is what I’ve done so far… http://i17.photobucket.com/albums/b99/vinzone/full-layout.gif … it will be coded in Joomla (dear god it’s going to be a nightmare) and I’ll be designing a page for the teams as well.

Wish me luck! Oh, and keep up the great tuts!!

Brent
March 30, 2009

Any word on when part nine will be coming?

Steve
March 31, 2009

Very nice tutorials! I agree with the quality control point, seeing a designer work out problems like that really gives you an understanding of the process, instead of just knowing how to code one specific site.

And PZ, the sites were making while following this are quite similar! http://wolvestest.info/test/index.html

Phil
April 3, 2009

Hi Gary,

I’ve been working on my first site for a friend, and I’ve been inspired by your blog’s sidebar.

I got everything to appear fine in Firefox, but for IE 6 & 7 or anything below (which I don’ t really care about) all my content in the side bar is messed up :(

Also, my copyright at the bottom will be moved, for some off reason.

Would you be able to take a look at it and help me how, please?

http://blog.fusion-lumiere.com

Would be much appreciated, thanks!

Phizy Baharudin
April 6, 2009

nice tutorials…but i’m stuck here at the 8th video..when’s 9th’s coming out? huhuhu..looking forward for the rest of converting to WP

Merxhan
April 7, 2009

I like the tutorial, I like all of them. I just wondered is there gonna be part 9, and when ? I can’t wait to see it :)
Thanks

CJ
April 9, 2009

@Phil

Hey, after looking over your code, here’s a bit of advice.

First off, Unless you want to have an IE only CSS file, then it doesn’t seem like perfectly aligning the elements can be done. This is because IE tends to give a certain amount of spacing around lists even if you set the spacing to zero. For yours, I was able to reduce the spacing if you set the “margin-left:0px” style on the “sidebar-left ul” elements and the “sidebar-right ul” elements.

That being said, instead of using lists of lists, which is great in concept but difficult in practice, consider each set of elements as being contained in its own div. That separate div can then have lists. for instance all of the articles of “articles recents” and the title can be contained in a div, with the separate articles listed out as a list.

hope this help :)

sam
April 15, 2009

like the tutorial like the fact that its not edited, can you pls post part 9 or give an indication of when it will be up.

cheers

CSS Tutorials
April 20, 2009

First time I have ever seen your website. Will definitely visit back. Great information and design!

Leave a comment

(required)

(required)


flyer templates