Dissecting a paid wordpress theme.

Hey guys, I've made a few wordpress themes from scratch with the help of my old partner. He's now moving on to bigger and better things. I know the basics of how it is put together.. .php coded pages, css, plugins, post types, etc. I was more familiar with joomla before recently learning how wordpress works.

I had to cheat recently and buy a pre made $75 template from templatemonster.com. I edited a lot of the .php and css coding to make the website look original. It came out great. LINK TO PAID THEME ( http://www.templatemonster.com/wordpress-themes/40737.html )

I like this template because it's fully responsive, it uses the 960 grid which is the actual width of my other websites made from scratch but seeing the functionality of the grid is awesome. It has a PC template, tablet up & down template, and an iphone up & down template.

I don't understand how the separate templates work, it doesn't work off of separate pages (ex: home.php, home_tablet.php, home_mobile.php). It just seems to know what you're viewing it on. Does anyone have any tips on how to figure out how these templates actually work? I would like to do similar sites in the future but from my own hand.

Thanks

 

Check your style sheets for stuff like
/* #Tablet (Portrait)

================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

.container_24 { width: 768px; }

Some info on that here http://mobile.smashingmagazine.com/...s-to-create-a-mobile-version-of-your-website/

hope that helps,
Nigel

 

Yep. The theme uses media query´s.

With those you can make the theme look even totally different if you want. Just building my first custom theme ever..and boy it is fun to watch how the media query´s work nicely

And this bit of code makes the MQ work.

<meta
name="viewport"
content="width=device-width; initial-scale=1.0"
/>

 

Not quite sure, but I believe these are pretty "closed" templates. What I usually do is a utilize a WP development template such as Catalyst for example, and then I just recreate the whole site as it allows you to custom tailor every section of the site through gui and custom coding, and it provides an easy way to code the responsive part of the site.