Managing WordPress Template Tags with Dreamweaver Snippets

For designers who don’t write PHP from scratch, the WordPress template code mentioned in past articles can be cumbersome to type out for each new project. For me, that code is a perfect candidate for Dreamweaver’s ‘Snippets’ tool which allows the code to be saved, managed and re-used with relative ease.

Create a Repository

In Dreamweaver, open the Snippets panel by hitting Shift+F9. Right-click somewhere in the whitespace, select “New Folder” and name it something simple like “WordPress”:

Write a Snippet

My most frequently used snippet is a simple query_posts function which pulls the last few blog headlines from the database and puts them in an unordered list. We’ll use it as our example:

<?php query_posts('showposts=3&cat=6'); ?>
<ul>
 <?php while (have_posts()) : the_post(); ?>
      <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
 <?php endwhile; ?>
 </ul>

Save It

Copy the code above, and with “Code View” open, paste it into Dreamweaver. Then select it, right-click it, name it and save it to your repository:

Implement It

Putting your snippet into action is as easy as clicking once in the “Code View” window, placing your cursor on the relevant line, then going over to the Snippets panel and double-clicking:

My Snippets

It’s as easy as that. As you can see from the image above, I’ve got a handful of my own snippets already saved.

WP Custom Field Value

<img src="/images/<?php $values = get_post_custom_values("key_name"); echo $values[0]; ?>" alt="" />

WP List Tertiary Page Links

<ul>
<?php if(wp_list_pages("title_li=&child_of=2")) { ?>
<?php } ?>
</ul>

WP PHP Include

<?php include (TEMPLATEPATH . "/nav.php"); ?>

WP Show Latest Headlines

<?php query_posts('showposts=3&cat=6'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

WP Show Recent Post Excerpt

<?php query_posts('showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_time('m.d.y') ?><?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark">+More</a>
| <a href="/blog">+All Posts</a>
<?php endwhile; ?>

(See on the homepage of DarrenHoyt.com)

WP Template Header
```
<?php
/*
Template Name: Snarfer
*/
?>
```

Feel free to re-use this code, and let me know what snippets you use most often.

Follow me on Twitter

8 Responses {+}

Sep 10
9:25 am

Pete White
Thanks, that’s a really useful thing to do if you make lots of WordPress templates and use dreamweaver.
Sep 23
4:00 pm

Khalid J.
Darren,

Frankly speaking, you’re a walking university. Each time I’m paying you a visit I find something amazing. For the deamweaver issue, why you don’t write a DW extension and have it as a DARREN Brand.

Keep up the good work.
Cheers
Jun 1
7:58 pm

Steve
WordPress and Dreamweaver are both excellent platforms for developing web sites. But there is a real gap when it comes to custom theme development. I’ve developed a new extension for Dreamweaver to accelerate WordPress theme file modifications by allowing you to get a ‘draft’ view of a theme file in Dw’s Design View.

This can help you instantly navigate Code View and to see how pieces of WordPress’s Template Tags and CSS attributes effect your pages and posts. It does this without a server by simply replacing common tags and emulating a dummy post in Dw’s design view. Its a beta (be kind!), but it is promising! Learn more at:

http://www.themedreamer.com/news
Jun 3
1:53 pm

Adam Kayce
Just had the idea to put these snippets into TextExpander… they already have an HTML snippet file (which I use), so all you have to type to get a long string of code (I tried pasting some in between ‘code’ tags, but wp didn’t like it) is something like ” ,a “. Love it.

I think I’m going to try putting your WP snippets into TextExpander and see what happens… the bonus is then they’d be available in any program (I don’t use DW anymore), like SubEthaEdit, Coda, or wherever.
Jun 3
10:54 pm

Darren
Thanks guys. On my short-list to check out…..ThemeDreamer, TextExpander, as well as Tagstention.
Jun 25
4:02 pm

Steve
Just a quick update to let you know that ThemeDreamer v.2 was released today. Now links into online documentation with code hints as well as backward compatible now with DW8 users. Full Mac support too. Without it, WordPress theme design is giving you only half the picture. You can see before/after screenshots at http://www.themedreamer.com/demos

Thanks!
Mar 28
6:30 pm

RaiulBaztepo
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language ;)
See you!
Your, Raiul Baztepo