Editing A WordPress Theme

Editing
a WordPress theme with Dreamweaver CS5

http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html
By Brian Wood
Dreamweaver
Editing a WordPress theme with Dreamweaver CS5 Part 1: Learning the basics
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 dont 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
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
Dreamweaver
o Click Go
o Go to: http://localhost/wordpress/wp-admin/install.php
Click Create configuration file
Click Lets 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

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
Dont 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
Editing a WordPress theme with Dreamweaver CS5 Part 3: Adding a logo, header styles, and menu
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
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

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
Dreamweaver
Click on the Hello World! Link
Tag Selector <a>
New CSS Rule
Selector Type: Compound
Selector Name: .posttitle a:hover
Less Specific five times
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
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
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
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 isnt 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
Dreamweaver
o
o
o
o
10
Click OK
Delete the text inserted and keep your cursor there
o Insert Div Tag
ID: featuredPosts
Click OK
Tag Selector <div#featureWrapper>
CSS Styles Panel
New CSS Rule
o Selector Type: ID
o Selector Name: #featureWrapper
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
o Selector Type: ID
o Selector Name: #featuredPosts
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

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
o Insert Div Tag
Class: featurebox
Click OK
Place your cursor after the newly created div
o Insert Div Tag
Class: featurebox
Click OK
Place your cursor after the newly created div
o Insert Div Tag
Class: featurebox
Click OK
CSS Styles Panel
New CSS Rule
Selector Type: Class
Selector Name: .featurebox
Click OK
o CSS Rule definition for # .featurebox in style.css dialog box
Category: Box
Width: 290px
Float: Left
Padding
o Right: 20px
11
Dreamweaver
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
o Selector Name: #featuredPosts h3
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
o Selector Name: #featuredPosts img
Click OK
o CSS Rule definition for # featuredPosts img in style.css dialog
box
Category: Box
Float: Left
Margin
o Right: 8px
Category: Border
Leave all three Same for all checkboxes selected
Style: solid
Width: 3px
Color: #000
Click OK
New CSS Rule

o
Selector Name: #featuredPosts a

Click OK
CSS Rule definition for # featuredPosts a in style.css dialog box
Category: Type
Color: #f90
Click OK
New CSS Rule

o Selector Name: #featuredPosts a:hover
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
o Selector Type: Class
o Selector Name: .clearboth
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(); ?>
<p class="readit"><a href="<?php the_permalink() ?>">Read more</a></p>

</div>

<?php endwhile; ?>
</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>
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

Editing A WordPress Theme

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Editing A WordPress Theme

Загружено:

Авторское право:

Доступные форматы

Editing

a WordPress theme with Dreamweaver CS5

Editing a WordPress theme with Dreamweaver CS5

The basics of previewing WordPress themes in Dreamweaver CS5

Editing a WordPress theme with Dreamweaver CS5

Adding a logo to your WordPress theme

Editing a WordPress theme with Dreamweaver CS5

Editing a WordPress theme with Dreamweaver CS5

o Rule Definition: style.css

Building the new home page layout structure

Editing a WordPress theme with Dreamweaver CS5

Editing a WordPress theme with Dreamweaver CS5

Selector Name: #featuredPosts a

New CSS Rule

Editing a WordPress theme with Dreamweaver CS5

<p class="readit"><a href="<?php the_permalink() ?>">Read more</a></p>

Вам также может понравиться