Unlike all the other CSS Frameworks out there, this framework allows you to define your own columns, widths, and gutters (margins). Thus, rollyourown.gs was born.

It’s simple, and it works. Once I get enough time for it, I’ll give it a proper face and add some more features to it. Until then, have fun with it.

Here’s the initial grey scale design I comped up:

The idea was to prominently display the latest freelance work I’ve been involved in and potentially serve as a means of new clientele prospects to see my latest work. This design would also sport my blog, but remove it from the primary spotlight. Instead, let my work be displayed first, then read my commentary on web design, development and WordPress.

But since I frequently have a change of thought, I developed the theme in a way to widgetize everything so if I that ever would happen, I wouldn’t have to do some drastic back-end changes. Drag and drop is everybody’s friend.

All good and well so I continued playing around with this layout concept and threw in some color:

The color palette was primarily influenced by Rastafarian colors.

When designing any kind of mockup, I try not to add substantial text due to the major differences in the way Photoshop renders text compared to a web browser. My work flow would then involve me coding up a quick and dirty xHTML/CSS layout to test the typography and seeing if there are any layout quirks I need to address before things become final.

You know it’s funny, I subconsciously changed the comp’s design tone from light to dark after spending late nights tweaking the layout’s code to get a better idea on the typography. My eyes started squinting trying to read black text on a white background (22″ monitor), it was too bright! Besides that minor adjustment, everything seemed ready to get converted into code. The layout relied heavily on transparency to give it a more vivid look and feel. I knew this was going to be a tad bit challenging for legacy browsers, but I persisted.

FOWD was around the corner and I was still working on browser quirks. I wanted the redesign to go live before I headed off to London but I was being a little to optimistic with that goal. So I striped the layout to it’s bare minimum with only the blog section going live with plans to continuously add new sections one by one after I get back from the trip. Of course, that didn’t happen. While I was in London, the design already grew old.

I wish I would of stuck with the concept, it really did look good in photoshop. Alas, I rushed it and the design went with it too. That’s why in this iteration of the redesign (codename: Atlanta City Theme), I wanted to start with building the actaul content, then all determine the style as I go along.

Today, I’m happy to announce that WP Framework, The Ultimate WordPress Theme Framework, is officially out and available for download.
What is it you might ask? Well if the tagline didn’t reveal too much, it’s essentially a blank WordPress theme—on steroids!

Check out the demo, see how it’s grown since day 1, or download it now and build some themes!

Still here? Hmm… your probably trying to wrap your head around the steroids part. Well then let me further elaborate what WP Framework actually is.

It’s a development theme. A theme that gets out of your way and let’s you focus on the good stuff—Site Specific Features.

That’s really all there is to say right now as WP Framework is only in it’s first release stages (release early, release often!). Like I said during one of my little brainstorming sessions, expect to see A LOT more “goodies” in the upcoming releases. I was just laying the foundation down for this release, I can’t wait to show you what I’ve really got in store for WP Framework!

First, let me tell you what it is and what it’s not so you have some clear guidelines to base your thoughts on.

WP Framework is primarily built to speed up development time for WordPress themes. In essence, it’s a blank theme with a base style, similar to blueprint but minus the fluff. So if you do front-end web development or the like, you’ll be in heaven.

For the 0.1 release, I just wanted to develop the bare minimums that any standards compliant theme should have nowadays. You know, comment/trackback separation, clean semantic xhtml/css classes/ids, microformats support… all that good stuff. Looking for killer features, hooks/filters, theme options and all those crazy stuff? Yeah, not yet… WP Framework will boast those types of features + more in upcoming releases. So don’t worry; it’ll be buzzword complaint when it makes sense to go down that route.

As for being a great parent for child themes, it’s a little lacking compared to the highly regarded Thematic (*bows*). Currently, the best way to modify WP Framework is directly if you haven’t been bitten by the child theming virus yet. I developed WP Framework in a way so you can take advantage of both sides of the Oreo.

When modifying it directly, all of your CSS styles should go neatly into the screen.css file. Pretty much what “How to Protect CSS Mods for ANY WordPress Theme” by Chris Pearson said.

As for modifying the xHTML in the template files, well that’s inevitable. In a perfect world, you would adapt your styling to the holy way of the Framework. Here’s a glimpse on the main structure:

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head profile="http://gmpg.org/xfn/11"></head>

<body>

    <div id="container">

        <div id="header"></div>

        <div id="content">

            <div id="primary" class="hfeed"></div>

            <div id="secondary"></div>

        </div>

        <div id="footer"></div>

    </div>

</body>
</html>

With this format, you should be able to achieve not all, but many, many layout variations. Seek inspiration over at CSS Zen Garden if needed.

Worst case scenario you’ll scrap everything and roll your own xHTML structure. Hey, I’m fine with that but when the time comes for upgrading to benefit from new features; you’re not going to enjoy backtracking all those changes. If it ever comes down to that, which I hope doesn’t happen, but if, I’ll be sure to include a changelog.txt to document what’s new and changed.

In a future release, I’ve got a slick new method that I’m working on to eliminate this hassle of a having a pre-define layout, allowing anyone to define their own custom structure as they see fit. But that’s all I can say for now.. I’m still working on making it just right.

Anywho, download WP Framework and take it for a spin!

When I begin a new WordPress powered project, I always find it time consuming to set up the same files and folders for every project. It gets frustrating.

Then when it comes to converting a site from HTML/CSS to WordPress, there’s that dreaded process of stripping out a recent project to just it’s bare minimum. After that, I’ve got firefox open with 10+ tabs skimming over the Codex with pages like Template Tags, and the Developer’s Doc for reference. I demand a better way to do this.

I’ve tried to automate this tedious process before. A couple of months ago, I created a batch file that I’d click on whenever I start a new WordPress project. That script generates an entire directory structure for a WordPress theme. In addition, the .PHP/.CSS files that it generates are empty and prefixed with two underscores “__”. I started doing this because it served as a neat checklist visually showing me which files where modified and which ones needed editing.

Default WordPress Theme Directory

Now that’s all gravy, but it still doesn’t solve my second problem. I still have to look up WP functions and Template Tags in the Codex—that is, if I haven’t memorized them all by now!

So, that brings us to another approach I tired. Use a theme that’s already out there. A few notably themes already have a good foundations to build upon. Features like microformats, great SEO, localization, semantic classes, hooks, child-theme support and just a solid code base are exactly what I’m looking to support in the ultimate theming framework I’ve been brainstorming on.

I admire a few themers out there for this kind of work. People like Michael Heilemann and the rest of the team behind k2,  Scott (sandbox), Ian (thematic), Ben and Chris (tarski), and a lot more who really push WordPress theming and just do something creative and different! However, all these guys have different goals that they’re accomplishing with their themes that are completely different from what I have in mind. So I’ll be adding to the hand full of great frameworks to build off of. Besides, it wouldn’t hurt having more options to choose from!

So I decided to fork my own theming framework dubbed “WP Framework“

So what exactly is this framework thingie? Well, the main goal I really wanted to accomplish with building this framework was to have a standard base to build all my WordPress related projects off of. Like I said before, I currently strip out snippets of code from recent projects I created since I learn new things as I make more and more themes. WP Framework will allow me to centralize all this action, which is a good thing!

The past two weeks I started crafting out a framework to serve as a bases for a solid WordPress (parent) theme and the results have already paid off twice! I’m using it for the next release for ptahdunbar.com (which is kinda why the release has been pushed back) and another for my department’s website which is currently getting a complete overhaul from static editing the html files to make changes to a complete WordPress powered CMS.

Another goal for this project was for it to be supper flexible and modular. This is where hooks and filters come into play. I’d like to really use widgets like never before to make for some creative uses. Lastly but not least, it’s got to be insanely fast. So the core will be squeaky clean from custom php spaghetti code and use built-in WordPress functions whenever possible.

How it stands out

One of the main design goals I wanted to achieve with WP Framework that differentiates it from other frameworks is the fact that it’s not styled. Those who constantly strip out unnecessary tags and wipe out the CSS styles understand where I’m coming from. Elliot Jay Stocks’ had the right mindset with his Starks theme.

Once I work out all the kinks and bugs, I’ll release the 0.1 release of WP Framework to the public as an open source project so everyone can benefit from this project.

Hopefully with all this, it’ll eliminate the repetitious task commonly done when creating a new WordPress theme and get you right into the development of site specific features. For that, I’m super excited!

I’ll be writing more about this once WordPress 2.7 comes out, stay tuned.

Although it’s been ~5 months since the I first started, I can assure you I haven’t forgotten about it and I’ve been making great progress recently. Since February, I counted 7 total complete internal redesigns on the layout! Each revision, I got closer to want I felt was worthy, so to say. Here’s a glimpse of what the logo looks like:

Like I said, this is a magazine theme so I wanted to capture that theme in the logo as well. It’s still in PSD format but I’m going to convert it in illustrator to make it scalable and vector-ish!

Logo’s looking awesome, but what about the theme?

Ah, yes. To tell you the truth, the actual theme is around 60% complete. Annoyed by Photoshop’s unrealistic text rendering and other small quirks, I decided to move to Stage 2, HTML/CSS markup to get a better feel of the layout. That’s where I’m at now, setting everything in stone so that once I make the conversion to WordPress, it’ll be a piece of cake.

I can’t wait to release this super customizable theme, it’s targeted to be the best of it’s class!

P.S. I also donated to WordPress today and hope that they continue to make WordPress as best as possbile!

Same Goals

It feels great staying on task with my original plans for the blog. As far as writing how to’s, practical guides and advice like I originally intended on doing, my focus is a little narrow at this point. Currently, that focus is on WordPress, case studies coming from my projects and the newly, client work. Since this blog is fairly new, I made the decision to focus only on a few topics before I go off and talk about other stuff like web applications and whatnot. Down the road, I’ll be adding new categories to talk about some more interesting things. I’ve got a lot of plans with WordPress and I love writing about my thoughts and processes for projects I pursue. It’s all about the experience! Which is why I like keeping my work as transparent as possible. This will also help me down the road when I become successful trying to figure out what the hell I was thinking when I was younger! Overtime, I’d like to further elaborate more on how I go about creating all these super cool blogs and websites (in the future, applications and more).

Blog Design

It’s only been a few months since I first launched this theme WP Generic and I don’t like it anymore. It just doesn’t feel like me. It feels cold, and unpersonalized. I’m trying not to be too harsh, but I can’t ignore this. Originally, I planned on launching this blog with Ptah Dunbar 2008, but changed my mind during the last few minutes before going live. I thought about this decision a lot which turned into this term I’d like to coin, Grow Theory if that doesn’t exist (more on that in another article). I have a future version of this theme to further enhance how it looks but I’d be going in the wrong direction if I continue with this theme. I’m making adjustments to fix this problem with a new redesign I’m coming up with. After the redesign and adding a few enhancements, I’ll be giving this theme away for those interested. I’ve been getting my design freak on lately reading graphic design books and magazines trying to get these awesome creative ideas out of my head and onto paper and digitally so that should be very apparent in the new design. Hopefully throughout the new design, it’ll express more of my needs and personality while still being flexible.

For the redesign, I’ve been thinking about a dark, clean, vector style, tropical, colorful look if that makes any sense.
Color scheme and possible imagery will be primarily based off my heritage, Puerto Rico (red, white and blue) and Jamaica (black, green, and yellow), and maybe even dab of orange sprinkled all around. The design will be very colorful and awesome looking but not too overpowering on the content. Sounds like an interesting concept eh? Again, this looks awesome in my mind, I just need to communicate these ideas correctly through Photoshop and Illustrator.

Plans for launching the redesign will hopefully be before FOWD because I really want to show off my design skills and what I’ve got when I meet other designers over there (that’s if I can go of course). While the current theme is simplistic and clean, it doesn’t do my design skills any justice and that’s not acceptable.

Trying not to concentrate too much on my blog’s design, I’ve still got a few unfinished projects that I need to finish like the bloggingtips.com redesign, web dev work at my job and some freelance work on the side. Oh, I almost forgot studying for midterms, I was told they’re suppose to be pretty hard.

I’m in the market for a DSLR Camera

Along with a few purchases like a tripod and extra memory which I still have to do some more research on.
I’m currently looking at some top quality DSLR cameras for product reviews (books), self-portraits and capturing quick motion shots. Cannon and Nikon are the only two brands that I’m considering. I’m thinking that a 30-50 prime lens should do the job, but I’m open to suggestions.
The main feature that I’m looking for is crisp picture quality (10+ megapixel) because I’m going to be doing a lot of cropping and editing. My 2.0 megapixel camera on my iPhone (without flash!) isn’t cutting it. So if you have any recommendations, your comments will be rewarded!

Services and Collaboration

With the new design rolling up or before, I plan on adding a “services” page to offer my web design and development skills up for an extremely affordable price. While I still plan on doing some freebies down the road from time to time, I still gotta pay the bills! Included within that page, I want to throw up some copy to inform other web designers and developers that I’d like to collaborate with them as well as I know how overwhelming our jobs can get.

Specialist in Redesigns

As for everyone else, I’ve been doing a lot of thinking. While I probably could offer a broad set of services from creating complete websites to SEO (Search Engine Optimization), I’m only offering redesigns. It’ll allow me to focus more on what I like doing which will ultimately produce better, quality results. Those still insisting on using me for other services can be requested via the contact form.

And finally

Once I get the new design up for this blog, I’d also like to update my about page to reflect the changes.
I’ll be highlighting on my collection of books I’ve got sitting in my room too which should serve as an interesting photo of me. Until then, I’ve got about 8 more or so books waiting to get adding to that stack .

When I get some final drafts mocked-up, I’ll be sure to post another update about it. Before then, I’m going to be starting, releasing and collaborating on new projects and client work that I’ve got cooking in the kitchen, I can’t wait!

Looking through several actual news websites, I took note on some of the elements that make those news website, well a news website.

First Let’s take a look at what are the things you’ll see when visiting these types of websites.
I’m going to assume readers are browsing at at least 1024×768 screen resolution which should be minimum standard nowadays.

CNN (www.cnn.com)

NY Times (nytimes.com)

ABC news (abcnews.go.com)

TIME (www.time.com)

MSNBC (www.msnbc.msn.com)

Newsweek (www.newsweek.com)

Reuters (www.reuters.com)

Washington Post (www.washingtonpost.com)

Guardian (www.guardian.co.uk)

The Wall Street Journal (online.wsj.com/public/us)

Bloomberg (bloomberg.com)

Times Online (www.timesonline.co.uk)

International Herald Tribune (www.iht.com)

AOL News (news.aol.com)

BBC Beta (www.bbc.co.uk/home/beta/)

News (news.com)

CBS News (www.cbsnews.com)

So what do they all have in common?

• Today’s date + when pages were last updated
• Latest News (of course)
• Advertisements
• Video
• Most popular
• Top Stories
• Short aggregated list of other topics they cover

Great. So now that we know what an actual news website should be populated with, we can convert those elements to WordPress and those will be the features that’ll be included in my premium WordPress news theme. Knowing the basic concept for the Homepage is to leur readers into the website. It’s like a portal in a sense.

Design
I already have an idea of how I want the design to look like, but ultimately, it’s not for me to decide, it’s going to be for you. So I’ll make sure to have it flexible enough as to where you can change/move things around. It’ll be great. I won’t get into how every things going to work, as for I’m not even sure! lol. I’ll update you on that in the near future.

Getting started
The goal for this project is to create a premium news theme aimed at small publishing companies to get their content out fast, easy, and elegant. I just brought the domain so the project is official. Now I’m phasing into the planning stage where I map everything out and figure out all how I’m going to make all this work. In the next article about my news theme, I’ll update you some previews along with a name for this bad boy.

Time frame
I’m giving myself a month starting today to have a working basic version up and running. That should give the competition more than enough time to catch up. In the meantime, I’ve got other activities going on during that time like the launch of my first free theme, featured client projects that I’m working on, and some more.

If you’d like to have any features in addition to those mentioned above, drop a line in the comments below and I’ll let you know if it’s possible.

UPDATE: I thought I might add Cleversage’s article “20 Free & Premium Magazine-Style WordPress Themes” to the list. There’s a couple of wp themes I didn’t know exist. I’ll be sure to check them out.

Design – Making it come to life (12.5 hours)

Ok, so the final design isn’t completely the same form what I sketched up in my moleskin but that’s the point! It gave me a starting point to build on top of. So once I was satisfied with the final concept for my front and single page, I jump into Photoshop and create those elements digitally.

This is probably the longest part in my entire process because:

• Usually, I’ll make a layout, then tweak it here and there until it meets all the necessary requirements of that page
• Once I’m satisfied with the layout, I’ll let it sit there for a few days.
• Then, I’ll add or change a few things if I thought of anything new during that time away.
• If, after a few days I still like the design I’ll proceed to the next step (html/css).
• Finally, I’ll print out a final copy of the layout, and use it as my blueprint when I get stuck coding the layout.

TIP: Having a design blueprint as a physical reference is perfect if you don’t have dual monitors or a lot of screen real estate. In addition, having some kind of reference for your project allows you to focus solely on the coding aspect for it as a pose to jumping right into the code, then designing on the way.

So here’s how it looks:

Markup – Making browsers happy (~3 hours)

Here comes the fun part. Structuring the layout into semantic xHTML markup and designing it using CSS while having all the big boy browsers duking it out–very time consuming but nevertheless rewarding.

Luckily, I was using the printed layout I made earlier as a blueprint, and was able to code up both, the front page and single page in less than an hour. The rest was fixing browser bugs which sadly took me another 2 hours or so. The navigation went through the most iterations because of IE wanting to stand out from all the cool kids. Whatever.

After all that, everything seemed to be aligning in place. Checked to see if my xHTML and CSS was valid, they sure were! Let’s move on…

TIP: when making your layouts IE compliant, try using margins more than padding since IE treats divs with no width or height set like they don’t exist.

Convert to Wordpress (~4 days)

Ugh. I knew this was going to be a problem. I had about 15 tabs open filled with wordpress codex mumbo jumbo. Reinventing the wheel and creating a theme from scratch really sucked the first time.

To start off, I hacked up Kubrick, the default theme that ships with WordPress. I had a lot of markup errors since I tried to base my code on Kubrick’s structure. Killed that idea. Then, I made a style for K2 which surprisingly worked, but the only thing I was picky about was I had to learn a lot about how K2 does things.

K2 has a lot of advanced features like rolling archives, live search, live commenting, tons of plug-in support, semantic classes etc. A lot of those features were overkill for what I was doing thus adding a lot more weight to my code than needed.

Striping all those stuff out resulted in not really using K2 for what it was made for. So I decided to kill that idea too and really make my theme from scratch now.

Using * { margin: 0px; padding: 0px; } in my css resulted in having to style every single html tag which was the whole purpose of that code, but it backfires on you if you don’t know all the html tags you have to style in WordPress. I tried making my styles very pseudo so that I wouldn’t have to recreate this part again. Finally, I got stuck formatting the content area of the blog which I didn’t initially design so I decided to just go with what just works for now. I found myself styling my content very similar to the way Paul Stamatiou styled his content on his blog. I’m a frequently “lurker” there so I guess I’ve grow accustom to reading in that style but changes will be made once I get this blog off the ground.

Back to WordPress

There is a lot of important information you should check out before, during, and after the creation process of your WordPress theme. Below is a good list of links to start with:

• http://codex.wordpress.org/WordPress_Semantics – Learn all the WordPress Jargon so you know what’s what
• http://codex.wordpress.org/Blog_Design_and_Layout – Great start to find how to do regular stuff in wordpress
• http://codex.wordpress.org/The_Loop – Learn to love the Loop. Breathe the Loop. Become one with the Loop.
• http://codex.wordpress.org/Templates – This will lead you to everything you need to know about theme development
• http://codex.wordpress.org/Template_Tags – Usually up-to-date reference on all the WordPress template tags and examples on how to use them
• http://codex.wordpress.org/Template_Hierarchy – Explains what happens when a user goes to different types of urls on your blog and what page it pulls up.

TIP: Having a list of html tags that WordPress allows when writing a post is a must when developing your theme. It makes it future proof so that you only have to style it once.

5 valuable lessons I learned from converting a website into a wordpress theme for the first time:

1. Remember that wordpress isn’t all that special. It’s using PHP and MySQL like every other dynamic website.
2. Regardless of what everybody is saying, you don’t have to split up your header, sidebar and footer just yet. Leave that for later.
3. Having a cheat sheet, or just using the wordpress codex for looking up template tags is invaluable!
4. Keep in mind, the template hierarchy. That’s how wordpress deals with incoming URLs (URIs) to your site along with their respective pages a user would land on.
5. Have a list of common HTML tags that you’ll have to style in WordPress.

Conclusion:

Right now, the theme that I designed is at it’s most basic form. Just a regular two column WordPress theme. I decided last minute to start it off like this because of the lack of content. I really don’t have a lot of content right now to present, so my original theme I designed would be overkill. The plan is to slowly phase out all the features over time once I get more into the habit of blogging; I called this idea “The Growth Theory” which I’ll be writing about in the future.

This is the end of the series going through the process of creating Ptah Dunbar dot Com. If you haven’t read part1, part2 and part3, I’d suggest you go check that out so you can read about the goal, background, and the mockup phase of this project.