Customizing WordPress Using Dreamweaver (BYOL)<br />Luke Kilpatrick<br />Twitter Tag: #adobemax87<br />
What you need to know<br />Basic Dreamweaver knowledge<br />Basic FTP knowledge (can you setup a site in Dreamweaver?)<br ...
Why are you here?<br />You want to setup your own or a company blog?<br />You need to create a website that is managed by ...
Who am I?<br />Luke Kilpatrick<br />Front End ColdFusion and Web Developer<br />Build my first website in 1996<br />Bloggi...
Little bit of history about WordPress<br />WordPress is the official successor of B2/Cafelog which is a blogging platform ...
Why you would want to host your own Blog or CMS?<br />Faster updates<br />More Customization<br />Usually cheaper than man...
Getting Started<br />Install MAMP or XAMPP<br />MAMP (Mac Apache MySQL PHP)<br />Open the MAMP.dmg and drag the MAMP app t...
Getting Started<br />Open Adobe Dreamweaver CS4<br />Select Site  New Site from the top menu<br />Select the Basic Tab an...
Create your Database<br />Go to http://localhost/phpmyadmin/ or to http://localhost:8888/phpmyadmin/<br />Create a new dat...
Change your root directory in httpd.conf<br />Open C:xamppapacheconf <br />Open httpd.conf in Dreamweaver CS4<br />Edit li...
Getting and Unzipping WordPress<br />Unzip WordPress from the source files /wordpress/wordpress-2.8.2.zip<br />After you h...
Configuring WordPress for installation<br />Open up “wp-config-sample.php”<br />On line 19 : replace “putyourdbnamehere” w...
Upload and Install WordPress<br />Then open a web browser and enter“http://localhost/wp-admin/install.php<br />Follow the ...
Logging in for the first time<br />Enter your username and password<br />You will land at the WordPress Dashboard<br />Cha...
The WordPress Dashboard<br />
WordPress Posts<br />
WordPress Pages<br />
WordPress Comments<br />
Look at the live site<br />Go to http://localhost/<br />Lets change how it looks….<br />
Installing WordPress Themes<br />What is a Theme?<br />Where to get themes?<br />Unzip and install the themes supplied fro...
WordPress Appearance<br />In the admin, select the appearance menu<br />Activate the magicblue theme<br />View the site<br />
Customizing a theme<br />In Dreamweaver, open up /wp-content/themes/magicblue<br />Look for style.css<br />Open style.css ...
Working with Widgets<br />What is a Widget?<br />Go to WordPress Admin, Select Appearance &gt; Widgets (below themes)<br /...
Adding a Plugin to WordPress<br />What is a Plugin?<br />Installing a Plugin, much like installing a theme.<br />Unzip and...
Add a page to show the Plugin<br />Select Pages<br />Select Add New<br />Title it – Contact Us<br />Paste the code to the ...
Adding an image gallery<br />Why have an image gallery?<br />Extract nextgen-gallery.zip from the CD to the plugins direct...
Any Questions?<br />WordPress is almost infinitely customizable with plugins for almost everything<br />Designing a theme ...
Upcoming SlideShare
Loading in...5
×

Editing Wordpress in Dreamweaver

12,414

Published on

Published in: Self Improvement
1 Comment
4 Likes
Statistics
Notes
  • I am having trouble getting your example to work for me and I think it is something to do with the paths/sample site you setup.
    Any chance I can contact you via email?
    You can reach me on slideshare@faxcess.com

    Thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
12,414
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
116
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Editing Wordpress in Dreamweaver

  1. 1. Customizing WordPress Using Dreamweaver (BYOL)<br />Luke Kilpatrick<br />Twitter Tag: #adobemax87<br />
  2. 2. What you need to know<br />Basic Dreamweaver knowledge<br />Basic FTP knowledge (can you setup a site in Dreamweaver?)<br />A server setup with MySQL and PHP – Local or Remote<br />Some experience with HTML and CSS<br />
  3. 3. Why are you here?<br />You want to setup your own or a company blog?<br />You need to create a website that is managed by many people?<br />Hate to code things beyond HTML and CSS?<br />Want to learn more about the most popular blogging platform out there?<br />Need a platform that is free, easy to use, easy to update and can be extended to do almost anything?<br />WordPress may be your answer!<br />
  4. 4. Who am I?<br />Luke Kilpatrick<br />Front End ColdFusion and Web Developer<br />Build my first website in 1996<br />Blogging with a WordPress since 2006 at http://www.lukek.ca<br />Manager of Fire On The Bay, Adobe Fireworks User Group and Co-Manager of Photoshop Till You Drop Photoshop User Group in San Francisco<br />Done many WordPress installs and setups for many clients, most with custom themes<br />
  5. 5. Little bit of history about WordPress<br />WordPress is the official successor of B2/Cafelog which is a blogging platform created in early 2001. <br />First version was WordPress 0.7 which was released in May 2003<br />WordPress 1.0 was released on January 3rd, 2004<br />WordPress 2.0 was released on December 31st, 2005<br />WordPress 2.8 was released on June 10th, 2009<br />We will be setting up and using WordPress 2.8x<br />
  6. 6. Why you would want to host your own Blog or CMS?<br />Faster updates<br />More Customization<br />Usually cheaper than many hosted solutions<br />You have complete control of everything from the content to the theme to the plug-ins<br />Can move it from host to host with no loss of content<br />Can scale it to bigger systems if traffic demands<br />
  7. 7. Getting Started<br />Install MAMP or XAMPP<br />MAMP (Mac Apache MySQL PHP)<br />Open the MAMP.dmg and drag the MAMP app to the applications folder<br />Start MAMP<br />XAMP (Cross Platform Apache MySQL PHP Perl)<br />Run the XAMPP installer<br />Install to C:XAMPP – (default)<br />Agree to everything, then select 1 to start the control panel<br />Start up Apache and MySQL<br />
  8. 8. Getting Started<br />Open Adobe Dreamweaver CS4<br />Select Site  New Site from the top menu<br />Select the Basic Tab and Type in the name of your site<br />Enter the URL to your site provided on the worksheet<br />Select Yes, I want to use a server technology<br />Select “PHP MySQL” from the dropdown<br />Select “Edit and test locally (my testing server is on this computer)”<br />Select the place on your hard drive where you will store the files.ie: C:siteswordpressdemo – or something similar<br />
  9. 9. Create your Database<br />Go to http://localhost/phpmyadmin/ or to http://localhost:8888/phpmyadmin/<br />Create a new database called wordpress<br />
  10. 10. Change your root directory in httpd.conf<br />Open C:xamppapacheconf <br />Open httpd.conf in Dreamweaver CS4<br />Edit line #182 to point at C:/sites/wpdemo for PC <br />Edit line #209 to point at C:/sites/wpdemo for PC<br />On Mac <br />In MAMP Select preferences<br />Go to the apache tab<br />Set it to /developer/workspace/wordpress or where you want your WordPress to run from.<br />
  11. 11. Getting and Unzipping WordPress<br />Unzip WordPress from the source files /wordpress/wordpress-2.8.2.zip<br />After you have wordpress-2.8.2.zip you will need to unzip it to the folder you setup for your site<br />Once it is unzipped, open up Dreamweaver and look at your local site<br />You should have a directory/folder called “wordpress”<br />Expand the wordpress directory and select all of the files and move them to the root of your site<br />We are now almost ready to install<br />
  12. 12. Configuring WordPress for installation<br />Open up “wp-config-sample.php”<br />On line 19 : replace “putyourdbnamehere” with “wordpress”<br />On line 22 : replace “usernamehere” with “root”<br />On line 25 : replace “yourpasswordhere” with “”<br />Save the file, then rename it to wp-config.php<br />We are now ready to install!<br />
  13. 13. Upload and Install WordPress<br />Then open a web browser and enter“http://localhost/wp-admin/install.php<br />Follow the instructions on screen:<br />Enter your Blog Title<br />Enter your Email<br />Click install<br />Record the Username and Password, you will need them in a moment.<br />Click login.<br />Your now setup to use WordPress!<br />
  14. 14. Logging in for the first time<br />Enter your username and password<br />You will land at the WordPress Dashboard<br />Change your password to something you can remember<br />Click Here<br />
  15. 15. The WordPress Dashboard<br />
  16. 16. WordPress Posts<br />
  17. 17. WordPress Pages<br />
  18. 18. WordPress Comments<br />
  19. 19. Look at the live site<br />Go to http://localhost/<br />Lets change how it looks….<br />
  20. 20. Installing WordPress Themes<br />What is a Theme?<br />Where to get themes?<br />Unzip and install the themes supplied from /wordpress/themes<br />Unzip the theme into [siteroot]/wp-content/themes/<br />Unzip all four into the themes directory<br />Go back to the WordPress admin – http://localhost/wp-admin/<br />
  21. 21. WordPress Appearance<br />In the admin, select the appearance menu<br />Activate the magicblue theme<br />View the site<br />
  22. 22. Customizing a theme<br />In Dreamweaver, open up /wp-content/themes/magicblue<br />Look for style.css<br />Open style.css in Dreamweaver<br />Open the site in a browser http://localhost/<br />Change line 232 from background:black to background:blue<br />Refresh the browser… Look at the menu bar<br />Locate headerbg.jpg in Dreamweaver – /wp-content/themes/magicblue/images/headerbg.jpg<br />Locate headerbg.jpg on [cd]/wordpress/media/headerbg.jpg<br />Copy headerbg.jpg from CD to /wp-content/themes/magicblue/images/<br />Refresh the browser… Look at the top menu<br />
  23. 23. Working with Widgets<br />What is a Widget?<br />Go to WordPress Admin, Select Appearance &gt; Widgets (below themes)<br />Add Categories to the side bar by dragging and dropping<br />Add Meta to the side bar by dragging and dropping<br />Click view site in new window, or refresh it in the other browser<br />Look at the Sidebar<br />
  24. 24. Adding a Plugin to WordPress<br />What is a Plugin?<br />Installing a Plugin, much like installing a theme.<br />Unzip and install the contact-form-7.2.0.1.zip on disc [CD]/wordpress/plugins<br />Unzip the theme into [siteroot]/wp-content/plugins/<br />Go back to the WordPress admin – http://localhost/wp-admin/<br />Select the Plugins from the side bar<br />Activate Contact Form 7<br />Click on settings<br />Copy the code in brown<br />
  25. 25. Add a page to show the Plugin<br />Select Pages<br />Select Add New<br />Title it – Contact Us<br />Paste the code to the body<br />Click Publish<br />Look at the site<br />Select Contact Us and see the form.<br />
  26. 26. Adding an image gallery<br />Why have an image gallery?<br />Extract nextgen-gallery.zip from the CD to the plugins directory<br />Activate the plugin from the plugins screen<br />Select Upload Pictures<br />Select upload a Zip File – Upload CD/wordpress/media/gallery.zip<br />Select Manage Gallery from the sidebar<br />Click Add Page<br />View the site and see your new gallery<br />
  27. 27. Any Questions?<br />WordPress is almost infinitely customizable with plugins for almost everything<br />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.<br />Questions? <br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×