Getting Excited About Edge Code

Last night Adobe’s Create The Web Tour rolled into Portland, Oregon and I attended. The night consisted of two presentations highlighting the new tools that Adobe has developed for creating the web. Of the many tools demonstrated, Edge Code really made an impression. It looks a bit like this:

edge-code

In the past, I’ve used a grip of opensource text editors. My favorite has always been Notepad++. While I am free to modify and redistribute the code under the GPL license, I never have for one very important reason: I have no idea how to. Notepad++, like many other text editors, is written in a language I do not understand. This is where Edge Code is a bit different.

Edge Code is a distribution of Brackets which is available under the MIT license and is written in html, css, and javascript. Three technolgies that I can read and write. This is pretty exciting; I’ve always wanted to be able to edit my editor and now I can!

This is only one of the many neat features of Edge Code. It also syncs with your browser so you can see your changes in real time. It understands the relationships between html and css, allowing you to edit your stylesheet directly from an html document. It’s great to see inovations like these being developed for those of use who build the web.

I’m going to install Edge Code today with the hope that I can introduce it into my daily work flow. Have you tried it yet? If so, please leave a comment and let us know what you think about it.

Custom Background & Custom Header

With the templates and CSS in place, let’s round off our theme building by adding a way for visitors to add a personal touch with their own Custom Backgrounds and Custom Headers.

I recommend adding support for these features after you’ve completed the CSS for your theme. It’s faster this way, because you can make the preview of the Custom Header and match your theme’s design. Plus, it’s easier to test the implementation of both backgrounds and headers when your design is complete. Think of them as the final flourish for your theme!

Please Note: The examples in this lesson are based on the design of the Shape Sample Stylesheet from the CSS lesson. If you want your header styles to look like those in the screenshots in this lesson, you’ll need to replace the styles in your current style.css with those from download.

Continue reading

The WordPress Theme Comments Template

I hate the Comments Template. There, I said it. It can be a confusing mess.

Luckily for you, I’ve sorted it out. Confusing still, yes. But sorted out. For this tutorial on the Comments Template, I’m basically going to walk you through what’s going to happen, show you some custom code snippets you’ll need to add to your inc/template-tags.php file, and then drop the whole thing on you. Hopefully, it’ll start to make sense. But at the very least you’ll have a wicked comments template.

Continue reading

The WordPress Theme Index Template

Index.php is the most crucial WordPress Theme Template. Not only because WordPress needs to use it if you’re missing any of its brother and sister templates (like, archive.php or tag.php) but because the work we do here, getting this template right, will help us breeze through the rest of our templates (with the exception of the dreaded comments template; that’s just plain difficult no matter how you look at it).
Continue reading