I’ll go out on a limb and say Wordpress is one of the finest software applications to come out this millennium. Its put the power of the press and the ability to reach thousands (or millions) of people in the hands of the people live never before. People from every walks of life can create powerful websites without needing to know a shred of code and it’s all open source. That said, for people who want to dig deeper and learn a little bit more about how to create their own themes, the process can be incredibly daunting. In took me ten posts just to cover the subject a few months back on this post. What Wordpress truly needs is a WYSIWYG editor to really empower people to get creative with their blogs!
(more…)
JonGos in WordPress | No Comments »
In my ten part series “Designing and Coding a Wordpress Theme From Scratch” we made our own Wordpress theme starting with a design in Photoshop. But now that you’ve made a theme, what about releasing it to the public?
JonGos in General, PHP, WordPress | No Comments »
Part 3 - “Photoshop to XHTML in 24 Hours” Part 4 - “Cleaning Up Your XHTML” Part 5 - “Preloading Images with Javascript and CSS” Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme” Part 7 - “Beginning with PHP for Wordpress” Part 8 - “Putting the Press in Wordpress with PHP” Part 9 - “Marking Up Header.php, Footer.php and Sidebar.php”
So far we’ve made a ton of progress with our theme design. We designed it in Photoshop, we converted to XHTML and then we began the somewhat tedious task of adding PHP. Now that we’ve created index.php, header.php, footer.php and sidebar.php, we can move on to creating the rest of the theme.
JonGos in General, PHP, Photoshop, WordPress | No Comments »
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop” Part 3 - “Photoshop to XHTML in 24 Hours” Part 4 - “Cleaning Up Your XHTML” Part 5 - “Preloading Images with Javascript and CSS” Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme” Part 7 - “Beginning with PHP for Wordpress” Part 8 - “Putting the Press in Wordpress with PHP”
Because Wordpress is fundamentally a PHP system we can add a few snippets of code to make our header, footer and sidebar files dynamic.
Marking Up Header.php
Your blog header file usually contains the title of your site linked to the homepage. In an HTML page we would simply add text or place an image and link to the homepage using <a href=”"></a>. The key to making our Wordpress theme, however, is we need to make all our links relative so that the end user can install the theme and use it with their own unique site with as little fuss as possible. It should just work.
JonGos in PHP, Photoshop, WordPress | No Comments »
Part 1 - “Tools For The Task” and “Preparation” Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop” Part 3 - “Photoshop to XHTML in 24 Hours” Part 4 - “Cleaning Up Your XHTML” Part 5 - “Preloading Images with Javascript and CSS” Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme” Part 7 - “Beginning with PHP for Wordpress”
Wordpress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability as the makers proudly proclaim at wordpress.org. The keyword there being ‘publishing’ and the most important part of the Wordpress publishing engine is the element that allows content to be published online easily and automatically. This element is called the the loop.
This is the seventh post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….
Part 1 - “Tools For The Task” and “Preparation” Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop” Part 3 - “Photoshop to XHTML in 24 Hours” Part 4 - “Cleaning Up Your XHTML” Part 5 - “Preloading Images with Javascript and CSS” Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”
JonGos in PHP, PHP Functions, Photoshop, WordPress | 3 Comments »
This is the sixth post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….
Part 1 - “Tools For The Task” and “Preparation” Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop” Part 3 - “Photoshop to XHTML in 24 Hours” Part 4 - “Cleaning Up Your XHTML” Part 5 - “Preloading Images with Javascript and CSS”
Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.
Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.
JonGos in Design, PHP, WordPress | No Comments »
You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:
In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.
Thus, we need to separate our inline CSS and put it in a separate file called style.css
JonGos in Design, General, PHP, Photoshop, WordPress | 3 Comments »
Designing your first Wordpress theme may seem incredibly ambitious at first but it’s really not that hard. It may help your understanding of Wordpress if you find a theme you like and disect or remix it. This is how I learned to code and one of my first attempt was a variation of Derek Punsalan’s theme The Unstandard.In Part 1 I talked a bit about the tools you’ll need and how to get prepared. Now that you’ve done that we’re going to get started.
Layout and Structure
This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:
JonGos in Design, PHP, Photoshop, WordPress | 4 Comments »
In this multi-part series I’ll detail how to create and design a Wordpress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP. Before you continue you should look over other tutorials “Working with Wordpress Offline Like A Pro and “Color Proofing Photoshop” as some of the topics discussed there will come up in this tutorial like working offline to develop themes, and proofing your colors so that they translate accurately for the web. At the end of the entire series I’ll allow you to download the fully developed theme with the PSD, and theme-files including stylesheets, and javascript.
JonGos in Design, PHP, Photoshop, WordPress | 3 Comments »
