editing wordpress in dreamweaver

®

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1

Customizing WordPress Using Dreamweaver (BYOL)

Luke Kilpatrick

Twitter Tag: #adobemax87

®


What you need to know

Basic Dreamweaver knowledge

Basic FTP knowledge (can you setup a site in Dreamweaver?)

A server setup with MySQL and PHP – Local or Remote

Some experience with HTML and CSS

®


Why are you here?

You want to setup your own or a company blog?

You need to create a website that is managed by many people?

Hate to code things beyond HTML and CSS?

Want to learn more about the most popular blogging platform out there?

Need a platform that is free, easy to use, easy to update and can be extended to do almost anything?

WordPress may be your answer!

®


Who am I?

Luke Kilpatrick

Front End ColdFusion and Web Developer

Build my first website in 1996

Blogging with a WordPress since 2006 at http://www.lukek.ca

Manager of Fire On The Bay, Adobe Fireworks User Group and Co-Manager of Photoshop Till You Drop Photoshop User Group in San Francisco

Done many WordPress installs and setups for many clients, most with custom themes

http://www.lukek.ca/

®


Little bit of history about WordPress

WordPress is the official successor of B2/Cafelog which is a blogging platform created in early 2001.

First version was WordPress 0.7 which was released in May 2003

WordPress 1.0 was released on January 3rd, 2004

WordPress 2.0 was released on December 31st, 2005

WordPress 2.8 was released on June 10th, 2009

We will be setting up and using WordPress 2.8x

®


Why you would want to host your own Blog or CMS?

Faster updates

More Customization

Usually cheaper than many hosted solutions

You have complete control of everything from the content to the theme to the plug-ins

Can move it from host to host with no loss of content

Can scale it to bigger systems if traffic demands

®


Getting Started

Install MAMP or XAMPP

MAMP (Mac Apache MySQL PHP) Open the MAMP.dmg and drag the MAMP app to the applications folder

Start MAMP

XAMP (Cross Platform Apache MySQL PHP Perl) Run the XAMPP installer

Install to C:\XAMPP – (default)

Agree to everything, then select 1 to start the control panel

Start up Apache and MySQL

®


Getting Started

Open Adobe Dreamweaver CS4

Select Site New Site from the top menu

Select the Basic Tab and Type in the name of your site

Enter the URL to your site provided on the worksheet

Select Yes, I want to use a server technology

Select “PHP MySQL” from the dropdown

Select “Edit and test locally (my testing server is on this computer)”

Select the place on your hard drive where you will store the files.ie: C:\sites\wordpressdemo – or something similar

®


Create your Database

Go to http://localhost/phpmyadmin/ or to http://localhost:8888/phpmyadmin/

Create a new database called wordpress

http://localhost/phpmyadmin/

http://localhost/phpmyadmin/

®


Change your root directory in httpd.conf

Open C:\xampp\apache\conf

Open httpd.conf in Dreamweaver CS4

Edit line #182 to point at C:/sites/wpdemo for PC

Edit line #209 to point at C:/sites/wpdemo for PC

On Mac

In MAMP Select preferences

Go to the apache tab

Set it to /developer/workspace/wordpress or where you want your WordPress to run from.

®


Getting and Unzipping WordPress

Unzip WordPress from the source files /wordpress/wordpress-2.8.2.zip

After you have wordpress-2.8.2.zip you will need to unzip it to the folder you setup for your site

Once it is unzipped, open up Dreamweaver and look at your local site

You should have a directory/folder called “wordpress”

Expand the wordpress directory and select all of the files and move them to the root of your site

We are now almost ready to install

®


Configuring WordPress for installation

Open up “wp-config-sample.php”

On line 19 : replace “putyourdbnamehere” with “wordpress”

On line 22 : replace “usernamehere” with “root”

On line 25 : replace “yourpasswordhere” with “”

Save the file, then rename it to wp-config.php

We are now ready to install!

®


Upload and Install WordPress

Then open a web browser and enter“http://localhost/wp-admin/install.php

Follow the instructions on screen:

Enter your Blog Title

Enter your Email

Click install

Record the Username and Password, you will need them in a moment.

Click login.

Your now setup to use WordPress!

®


Logging in for the first time

Enter your username and password

You will land at the WordPress Dashboard

Change your password to something you can remember

Click Here

®


The WordPress Dashboard

®


WordPress Posts

®


WordPress Pages

®


WordPress Comments

®


Look at the live site

Go to http://localhost/

Lets change how it looks….

http://localhost/

®


Installing WordPress Themes

What is a Theme?

Where to get themes?

Unzip and install the themes supplied from /wordpress/themes

Unzip the theme into [siteroot]/wp-content/themes/

Unzip all four into the themes directory

Go back to the WordPress admin – http://localhost/wp-admin/

http://localhost/wp-admin/

®


WordPress Appearance

In the admin, select the appearance menu

Activate the magicblue theme

View the site

®


Customizing a theme

In Dreamweaver, open up /wp-content/themes/magicblue

Look for style.css

Open style.css in Dreamweaver

Open the site in a browser http://localhost/

Change line 232 from background:black to background:blue

Refresh the browser… Look at the menu bar

Locate headerbg.jpg in Dreamweaver – /wp-content/themes/magicblue/images/headerbg.jpg

Locate headerbg.jpg on [cd]/wordpress/media/headerbg.jpg

Copy headerbg.jpg from CD to /wp-content/themes/magicblue/images/

Refresh the browser… Look at the top menu

®


Working with Widgets

What is a Widget?

Go to WordPress Admin, Select Appearance > Widgets (below themes)

Add Categories to the side bar by dragging and dropping

Add Meta to the side bar by dragging and dropping

Click view site in new window, or refresh it in the other browser

Look at the Sidebar

®


Adding a Plugin to WordPress

What is a Plugin?

Installing a Plugin, much like installing a theme.

Unzip and install the contact-form-7.2.0.1.zip on disc [CD]/wordpress/plugins

Unzip the theme into [siteroot]/wp-content/plugins/

Go back to the WordPress admin – http://localhost/wp-admin/

Select the Plugins from the side bar

Activate Contact Form 7

Click on settings

Copy the code in brown

http://localhost/wp-admin/

®


Add a page to show the Plugin

Select Pages

Select Add New

Title it – Contact Us

Paste the code to the body

Click Publish

Look at the site

Select Contact Us and see the form.

®


Adding an image gallery

Why have an image gallery?

Extract nextgen-gallery.zip from the CD to the plugins directory

Activate the plugin from the plugins screen

Select Upload Pictures

Select upload a Zip File – Upload CD/wordpress/media/gallery.zip

Select Manage Gallery from the sidebar

Click Add Page

View the site and see your new gallery

®


Any Questions?

WordPress is almost infinitely customizable with plugins for almost everything

Designing a theme from scratch is hard, its best to pick a theme from the gallery that is close to the layout you would like then start customizing to your needs.

Questions?

editing wordpress in dreamweaver

Self Improvement