Your SlideShare is downloading. ×
0
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Editing Wordpress in Dreamweaver
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Editing Wordpress in Dreamweaver

12,278

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,278
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
115
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Customizing WordPress Using Dreamweaver (BYOL)<br />Luke Kilpatrick<br />Twitter Tag: #adobemax87<br />
  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. 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. 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. 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. 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. 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. 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. Create your Database<br />Go to http://localhost/phpmyadmin/ or to http://localhost:8888/phpmyadmin/<br />Create a new database called wordpress<br />
  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. 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. 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. 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. 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. The WordPress Dashboard<br />
  16. WordPress Posts<br />
  17. WordPress Pages<br />
  18. WordPress Comments<br />
  19. Look at the live site<br />Go to http://localhost/<br />Lets change how it looks….<br />
  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. WordPress Appearance<br />In the admin, select the appearance menu<br />Activate the magicblue theme<br />View the site<br />
  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. 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. 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. 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. 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. 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 />

×