If you’re like me, and live the flexibility of working in Dreamweaver and its WYSIWYG design view, you’ll have noticed that when you’re designing for WordPress, you don’t really get a real view of what you’re actually working with. This is down to the header and footer portions of the site being called using the WordPress functions ‘wp-head()’ and ‘wp-footer()’. The same applies to sidebars.
There are a number of solutions, some of which include splitting the header, content, and footer once you’re happy with the theme. The problem with this approach comes when you’re working on a layout that has many theme pages. My solution is to trick dreamweaver, which gives us full preview and ability to edit the style.css page.
Step 1 – Preparing header.php
This is where it all starts, header.php. Stylesheets are called using ‘bloginfo(‘stylesheet_url’)', which as you can see in the screenshot below doesn’t give a preview. Furthermore, we can’t use the CSS pane to edit the stylesheet.
The line we’re looking to change is the one which relates to the link tag for the stylesheet. We could just tell Dreamweaver to directly reference the style.css, but we don’t want to do that – because we’re building properly! This is good practice for those rare occasions where a theme’s folder may change for example.
We’re going to change:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> to:
<?php if ($edit) { ?>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<?php } else echo '<link rel="stylesheet" type="text/css" media="all" href="'.get_bloginfo( 'stylesheet_url' ).'" />'; ?>By using the <?php if ($edit) { ?> and calling the stylesheet, Dreamweaver is able to read and edit the stylesheet. When we upload this to the web server, PHP ignores the manual call that dreamweaver uses because $edit variable is not set and instead uses the call to ‘get_bloginfo()’ instead.
Now you can edit and preview the changes in Dreamweaver without having to upload it to the web server.
Step 2 – The template file
The next thing we’re going to do is trick dreamweaver in a similar way when we’re working with template files. In this example, I’m going to use ‘front-page.php’, and applying a similar fix we can work directly to the stylesheet and preview the changes before uploading. Furthermore the fix also includes the header and footer sections into the preview, allowing a fuller previewing experience.
The first thing we’re going to do is replace:
<?php get_header(); ?> With:
<?php if ($edit) { ?>
<?php require('header.php'); ?>
<link type="text/css" rel="stylesheet" href="style.css" />
<?php } else get_header(); ?>In the same way that we applied the fix in step 1, by using a dummy variable we know is blank, we can use the require() function to pull in the content from header.php and use a link tag to allow editing of the stylesheet directly.
As we know the variable ‘$edit’ has no value, the web server ignores the require() and the link tag, and uses ‘get_header()’ instead to call the header content.
The screenshot above shows the preview of the site on the right which includes the ability to edit the style.css from the design view. The last thing we’re going to do is replace
<?php get_footer(); ?> With:
<?php if ($edit) { ?>
<?php require('footer.php'); ?>
<?php } else get_footer(); ?>This applies the fix in the exact same way to call our footer from within the template file.
Step 3 – The footer.php file
Finally, we’re adding 3 lines to the footer file to use the link tag to the stylesheet to allow previewing in Dreamweaver, as well as editing of the ‘style.css’ file within the Design view.
All we need to do is call the same dummy variable, which tricks Dreamweaver into using the tags contained within the call. Simply insert the following to the top of your footer.php file:
<?php if ($edit) { ?>
<link type="text/css" href="style.css" rel="stylesheet" />
<?php } ?>That’s it! You now have the ability to directly change the styles.css file from Design view, preview full template files, and all of this without breaking anything in WordPress!
The Author
Ste Wright is the Web Applications Developer at USP Creative, and author of this post.