Editing a WordPress theme with Dreamweaver CS5 http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html By Brian Wood Dreamweaver Editing a WordPress theme with Dreamweaver CS5 – Part 1: Learning the basics http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html •
•
•
•
•
2 Introduction o The most popular blog software today  Has emerged into a full content management system o The beauty – the separation of content and style  The content is stored in a MySQL database Pieces of the WordPress puzzle o Two options  Host WordPress • You will need PHP and MySQL on your computer • Set up WordPress on your machine  Host the blog through WordPress.com How WordPress works o Lots of files are installed  These allow WordPress to run your blog o You use the administration area to run your blog  Also, tell WordPress which theme to use o The WordPress files  Assemble the page based on the options you set o You don’t need to rebuild all of your pages each time the blog is updated The WordPress template file hierarchy o Like pieces of a puzzle  When added together they form complete web pages o Some pages are used on every page of your blog  header  footer o index.php is required in every theme o home.php  Takes precedence over index.php The WordPress page structure o Open index.php  Code View o Three basic sections  header  content  footer o Other pages are referenced from the theme directory o Look for these three lines of code  <?php get_header(); ?>  <>php get_sidebar(); ?>  <>php get_footer(); ?>  By having three separate files, allows consistency among the other pages in the site o Find this code:  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> Editing a WordPress theme with Dreamweaver CS5 This determines if there are any blog posts It loops through all of them and display each post • Until the loop criteria has been satisfied  These blog posts com from the MySQL database Taming WordPress with Dreamweaver CS5 o Dreamweaver has a variety of excellent tools for creating, editing, and viewing WordPress theme files  Code hinting  Highlights invalid code  Enables you to preview your WordPress theme using Live View  Allows you to explore it through Live Cod view 

•
Editing a WordPress theme with Dreamweaver CS5 – Part 2: Setting up your site http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html •
•
The basics of previewing WordPress themes in Dreamweaver CS5 o For WordPress to work:  You need to have a local web server  Install WordPress  Create a site o How does it work?  Without a local web server, Dreamweaver cannot preview the WordPress php files  Typically installed in a folder in the web server  Themes are kept in the WordPress folders o Setting up your local web server  It is easiest to use • Windows: XAMP • Mac OS X: MAMP Installing WordPress o Download the latest release of WordPress o Place the file in the htpdocs folder o Create a simple database  Open phpMyAdmin • Below the text box labeled Create new database o Type: wordpress o Click Create • Click the Home icon in the upper left o Click Privileges o Click Add a New User o Enter a username (dreamweaver) and password (development) o Re-­‐enter the password (development) o Leave everything at its default o Click Go • Return to the Privileges page o Click Edit Privileges o Select the wordpress database o Click Check All 3 Dreamweaver •
4 o Click Go o Go to: http://localhost/wordpress/wp-­‐admin/install.php  Click Create configuration file  Click Let’s Go  Enter • database name: wordpress • username: dreamweaver • password: development • database host type: localhost • Click Submit • Click Run Install  Enter the information for your WordPress site: • Set Title: Dreamweaver • Username: admin • Password: development • Email address: enter your email address • Click Enter Install the theme files and set up your site in Dreamweaver o Installing the theme files  Copy the MyTheme folder into the WordPress themes folder o Set the theme in WordPress  Go to: http://localhost/wordpress/wp-­‐admin/  Log in to WordPress  Click Appearance • Select the Adobe Developer Connection Theme 1.0 by Codify Design Studio • Activate this theme  Go to: http://localhost/wordpress/ • Make sure the theme is active for your blog o Setting up your site in Dreamweaver  Site > New Site • Site Setup for Unnamed Site dialog box o Site name: blog o Local site folder: wordpress folder o Click on Servers (the left side)  Click the Plus button • Stay in Basic • Server Name: localhost • Connect using: Local/Network • Server Folder: wordpress folder • Web URL: http://localhost/wordpress/ o Setting up site-­‐specific code hinting  Dreamweaver can have WordPress-­‐specific PHP code hints  Dreamweaver supports three frameworks by default: • Drupal • Joomla! • WordPress  Site > Site-­‐Specific Code Hints Editing a WordPress theme with Dreamweaver CS5 Site-­‐Specific Code Hints dialog box o Structure: WordPress o Click the Select Sub-­‐root Folder button  Tot the right of the Sub-­‐root text box o Click OK • Notice the dw_php_codehinting.config file added o Do not delete Testing code hinting  Easiest way to see if it works  Open index.php • wp-­‐content/themes/MyTheme  After <?php get_header(); ?> • Type: <?php ec Ctrl+spacebar  Delete the above code  Type: <?php wp Ctrl+spacebar • Continue typing _lis o Notice the list of code hints changing o Click wp_list_pages($args)  Notice the post-­‐template.php to the right in the list • Press Escape  File > Close • Don’t save changes Previewing a page  Open index.php • In the top level of the folder o Same folder as the dw_php_codehinting.config file  Created earlier  Live View • The page will be displayed in Dreamweaver • Notice the URL that appears in the Address box below the Live View button o The local address  Live Code • No PHP code will be shown • Updates as you interact with the page in Live View •
o
o
Editing a WordPress theme with Dreamweaver CS5 – Part 3: Adding a logo, header styles, and menu http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html •
Adding a logo to your WordPress theme o Determine your logo height  Open index.php (site root level)  Make sure you are in the Current tab of the CSS Styles Panel  Live View  Inspect • Position the cursor over the small cloud in the header below the Privacy Policy link • When the header is highlighted, click 5 Dreamweaver CSS Styles panel o Current Area o Look at the Properties for .bannerArea .container o Height: 83px Create your logo  Open Adobe Illustrator • File > New o New Document dialog box  Name: blog_head  New Document Profile: Web  Width: 300px  Height: 83px  Click OK • Type: Company Blog • Add a logo icon o Window > Symbols • File > Save For Web & Devices o PNG-­‐24 o Export  blog_head.png • Place in the images directory of the local theme Inserting the logo in your theme  Open header.php • MyTheme folder  Code View • Delete the following code: <p class="title"><a href="<?php echo get_option('home'); ?>/"> <?php bloginfo('name'); ?> </a><br /> <span class="description"> <?php bloginfo('description'); ?> </span></p>  Common Area of the Insert panel • Insert > Image o blog_head.png o Image Tag Accessibilities dialog box  Alt Text: Company Blog  Click OK  Split View • Notice the newly created image Linking the logo  Design View • Select the image o Properties Inspector  Link: #  Code View • Delete the # sign • Replace with: <?php echo get_option(‘home’); ?> o This is a WordPress option to takes a user to the homepage • Img tag o Add border=”0” •
o
o
o
6 Editing a WordPress theme with Dreamweaver CS5 We will now change this from a relative to an absolute link • This will ensure that the logo will display correctly on every page o Regardless of your permalink structure o Viewing the new logo  Open the index.php file  Refresh Live View  The logo should be on the page  Test the link • Ctrl+click the logo • You will be taken to the blogs homepage Styling theme post titles o The post titles are enclosed in <h2> tags with a class of pagetitle  By applying the pagetitle class to both the <h1> and <h2> tags, the post title tags can quickly be changed o index.php  Live View • Click Inspect  Position the pointer over Hello Word! • Click  Tag Selector <h2.posttitle>  Split View • Open style.css (in the MyTheme folder)  Add the following code (at the bottom of the page): .posttitle { font-­‐family: Georgia, "Times New Roman", Times, serif; color:#900; font-­‐size:24px; border-­‐bottom:1px solid #f2f2f2; padding-­‐bottom:5px; }  File > Save  Refresh Live view for index.php  The color has inherited the font color from the <a> tag • We will need to add another rule to give it the same red color  Click on the Hello World! Link • Tag Selector <a> • New CSS Rule o New CSS Rule dialog box  Selector Type: Compound  Selector Name: .posttitle a • Less Specific five times  Rule Definition: style.css  Click OK o CSS Rule definition for .posttitle a in style.css dialog box  Category: Type • Color: #900  Click OK  We will now create a different hover state color 
•
7 Dreamweaver Click on the Hello World! Link • Tag Selector <a> • New CSS Rule o New CSS Rule dialog box  Selector Type: Compound  Selector Name: .posttitle a:hover • Less Specific five times  Rule Definition: style.css  Click OK o CSS Rule definition for .posttitle a in style.css dialog box  Category: Type • Color: #555  Click OK Adding a menu system o Open functions.php (MyTheme folder) o Add the following code (before the closing ?> tag): add_action( 'init', 'register_my_menu' ); function register_my_menu() { register_nav_menu( 'primary-­‐menu', __( 'Primary Menu' ) ); } o This code will register the menu  It tells WordPress that your theme will use the new menu system o We will now add the code to the header to tell WordPress where to insert the menu o Open header.php (MyTheme folder) o Delete navigation goes here o Insert the following code (where the text previously was): <?php wp_nav_menu( array( 'theme_location' => 'primary-­‐menu' ) );?> o Go to a browser  Open: http://localhost/wordpress/wp-­‐admin/  Click Appearance • Click Menus • Menu Name: Primary Menu • Click Create Menu • In the Pages section o Click View All o Select each of the pages listed o Click Add to Menu o Click Save Menu o The pages are listed as gray boxes in the Primary Menu area  You can drag the pages to reorder how they will appear o Dreamweaver  Refresh Live View o We will style the menu bar slightly  New CSS Rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: li.menu-­‐item 
•
8 Editing a WordPress theme with Dreamweaver CS5 
o Rule Definition: style.css o Click OK • CSS Rule Definition dialog box for li.menu-­‐item o Category: Box  Float: Left o Category: List  List-­‐Style-­‐Type: none o Click OK New CSS Rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: li.menu-­‐item a o Rule Definition: style.css o Click OK • CSS Rule Definition dialog box for li.menu-­‐item o Category: Type  Text-­‐decoration: none o Category: Block  Display: Block o Category: Box  Padding • Deselect Same for all • Top: 4px • Right: 10px • Bottom: 4px • Left: 10px o Click OK Editing a WordPress theme with Dreamweaver CS5 – Part 4: Building a custom home page http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html •
Building the new home page layout structure o Create home.php from index.php  home.php is a page that WordPress looks for when a visitor views your blog homepage  If home.php isn’t used, WordPress will look for index.php  Open index.html (in the MyThemes folder) • File > Save As o home.php o Create a special featured post area  We are going to create a featured post are  Code View • After <?php get_header • Common Area of the Insert Panel o Insert Div Tag  Insert Div Tag dialog box • Insert: At insertion point • ID: featureWrapper 9 Dreamweaver o
o
o
o
10 • Click OK • Delete the text inserted and keep your cursor there • Common Area of the Insert Panel o Insert Div Tag  Insert Div Tag dialog box • Insert: At insertion point • ID: featuredPosts • Click OK Tag Selector <div#featureWrapper> CSS Styles Panel  New CSS Rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #featureWrapper  Rule Definition: style.css  Click OK o CSS Rule definition for #featureWrapper in style.css dialog box  Category: Block • Text-­‐align: Center  Category: Background • Background-­‐color: #333  Category: Box • Width: 100% • Clear: Both Tag Selector <div#featuredPosts> CSS Styles Panel  New CSS Rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #featuredPosts  Rule Definition: style.css  Click OK o CSS Rule definition for # featuredPosts in style.css dialog box  Category: Type • Color: #fff  Category: Block • Text-­‐align: Left  Category: Box • Width: 940px • Height: 200px • Padding o Deselect Same for all o Top: 20px o Right: 0 o Bottom: 20px o Left: 20px • Margin o Deselect Sam for all Editing a WordPress theme with Dreamweaver CS5 o
o
o
o
Top: 0 Right: auto Bottom: 0 Left: auto  Click OK View the file • Type http://localhost/ in the address bar Create the featured post containers  We want to have three posts across the feature area • We will need containers to hold these posts  Inside the featured posts div • Create three new divs with a class of featurebox  Delete the text inserted and keep your cursor Content for id "featuredPosts" Goes Here • Common Area of the Insert Panel o Insert Div Tag  Insert Div Tag dialog box • Insert: At insertion point • Class: featurebox • Click OK  Place your cursor after the newly created div • Common Area of the Insert Panel o Insert Div Tag  Insert Div Tag dialog box • Insert: At insertion point • Class: featurebox • Click OK  Place your cursor after the newly created div • Common Area of the Insert Panel o Insert Div Tag  Insert Div Tag dialog box • Insert: At insertion point • Class: featurebox • Click OK  CSS Styles Panel • New CSS Rule o New CSS Rule dialog box  Selector Type: Class  Selector Name: .featurebox  Rule Definition: style.css  Click OK o CSS Rule definition for # .featurebox in style.css dialog box  Category: Box • Width: 290px • Float: Left • Padding o Deselect Same for all o Right: 20px 
o
11 Dreamweaver o
o
o
o
o
12  Click OK  We will add some content in the featurebox divs • Delete the text Content for class "featurebox" Goes Here • Type: <h1>This is a sample post title</h3> <p>Lorem ipsum dolor si amet …</p> CSS Styles Panel  New CSS Rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: #featuredPosts h3  Rule Definition: style.css  Click OK o CSS Rule definition for # featuredPosts h3 in style.css dialog box  Category: Type • Font-­‐weight: normal • Color: #f90  Category: Block • Letter-­‐spacing: normal  Click OK We now need to add the thumbnail and text link for each post In each of the featurebox divs, add: <p><img src="thumb.jpg" />Lorem impsum dolor si amet …</p> <p class="readit"><a href="#">Read more</a></p> Copy and paste into all three featured posts divs CSS Styles panel  New CSS Rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: #featuredPosts img  Rule Definition: style.css  Click OK o CSS Rule definition for # featuredPosts img in style.css dialog box  Category: Box • Float: Left • Margin o Deselect Same for all o Right: 8px  Category: Border • Leave all three Same for all checkboxes selected • Style: solid • Width: 3px • Color: #000  Click OK  New CSS Rule • New CSS Rule dialog box o Selector Type: Compound Editing a WordPress theme with Dreamweaver CS5 o
o
Selector Name: #featuredPosts a  Rule Definition: style.css  Click OK CSS Rule definition for # featuredPosts a in style.css dialog box  Category: Type • Color: #f90  Click OK New CSS Rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: #featuredPosts a:hover  Rule Definition: style.css  Click OK o CSS Rule definition for # featuredPosts a:hover in style.css dialog box  Category: Type • Color: #fff  Click OK o We need to clear the floats from the feature divs o After the </div> for the featuredPosts div add: <div class="clearboth"></div> o CSS Styles panel  New CSS Rule • New CSS Rule dialog box o Selector Type: Class o Selector Name: .clearboth  Rule Definition: style.css  Click OK o CSS Rule definition for .clearboth in style.css dialog box  Category: Box • Clear: both  Click OK Creating featured posts in WordPress o Set up a featured post category in WordPress  Login to WordPress (http://localhost/wordpress/wp-­‐
login.php?redirect_to=http://localhost/wordpress/wp-­‐admin/&reauth=1) • Click Posts (left side) • Click Categories  Category Name: featured  Category slug: featured  Click Add New Category o Create a post in the feature area  We need to create some posts for the featured posts area  Click Add New (left sidebar under Posts tab)  Type the Post Title and Post Content  Type an excerpt in the Excerpt box  Assign the post to the new featured category • Click the checkbox labeled feature 
•
13 Dreamweaver •
14 o Categories panel  Publish (top right of the sidebar) • Click Save Draft • This post will not be visible until we choose publish  Upload an image • Click the Media tab (left sidebar) • Click Add New • Browse to an image  Click the image in the Media library • Select the entire contents of the File URL box and copy it  Click Posts (left sidebar)  Click the name of the post  Custom Fields option • Name: featurethumb • Value: Paste the copied File URL  Click Add Custom Field  Click Publish Creating a custom featured post loop o Remove the sample content  Remove all but one of the featurebox divs  Remaining featurebox div • Remove the sample post text • Leave the tags o <h3> o <p> o <Img> <h3></h3> <p><img src="thumb.jpg" /></p> <p class="readit"><a href="#">Read more</a></p> o Create a new post loop  WordPress posts are displayed using a loop  We will place this loop inside the featuredPosts div • We will loop through the featured posts category o Maximum of three • The featurebox div will be inside the loop o They will be repeated  Change featuredPosts to: <div id="featuredPosts"> <?php $featuredPosts = new WP_Query(); $featuredPosts-­‐>query('category_name=featured&showposts=3'); while($featuredPosts-­‐>have_posts()) : $featuredPosts-­‐>the_post(); ?> <div class="featurebox"> <h3><?php the_title(); ?></h3> <p><img src="<?php echo get_post_meta($post-­‐>ID, 'featurethumb', true); ?>" /><?php the_excerpt(); ?> Editing a WordPress theme with Dreamweaver CS5 o
<p class="readit"><a href="<?php the_permalink() ?>">Read more</a></p> </div> <?php endwhile; ?> <div class="clearboth"></div> </div>  Here is how the post loop works • The custom query starts inside the featuredPosts div <div id="featuredPosts"> <?php $featuredPosts = new WP_Query(); • The next line tells WordPress to retrieve a maximum of three posts $featuredPosts-­‐>query('category_name=featured&showposts=3'); • The next line starts the loop while($featuredPosts-­‐>have_posts()) : $featuredPosts-­‐>the_post(); ?> • The sample content is replaced with the WordPress tags in this section: <div class="featurebox"> <h3><?php the_title(); ?></h3> <p><img src="<?php echo get_post_meta($post-­‐>ID, 'featurethumb', true); ?>" /><?php the_excerpt(); ?> <p class="readit"><a href="<?php the_permalink() ?>">Read more</a></p> </div> • This last line closes the loop and he featuredPosts div <?php endwhile; ?> <div class="clearboth"></div> </div> Edit the main post loop  The featured posts are being duplicated • We will address that now  In WordPress (http://localhost/wordpress/wp-­‐admin/) • Click Categories  Hover over the featured category • Look at the status bar of you browser • The ending number is the ID of your featured category • We can now edit the main loop to exclude this category  Just before the start of the main loop • Not the featured posts loop • Enter this (replace 4 with the value for your featured category ID): <?php query_posts("cat=-­‐4"); ?> • Make sure to leave the minus sign o This tells WordPress to exclude the category 15