editing wordpress in dreamweaver
TRANSCRIPT
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1
Customizing WordPress Using Dreamweaver (BYOL)
Luke Kilpatrick
Twitter Tag: #adobemax87
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 3
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!
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 7
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9
Create your Database
Go to http://localhost/phpmyadmin/ or to http://localhost:8888/phpmyadmin/
Create a new database called wordpress
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10
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.
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 12
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!
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13
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!
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15
The WordPress Dashboard
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 16
WordPress Posts
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17
WordPress Pages
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 18
WordPress Comments
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19
Look at the live site
Go to http://localhost/
Lets change how it looks….
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
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/
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 21
WordPress Appearance
In the admin, select the appearance menu
Activate the magicblue theme
View the site
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 22
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 23
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 25
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.
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 27
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?