Word press & dreamweaver


Published on

Presentation on using WordPress with Dreamweaver CS5.x on a local system

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Word press & dreamweaver

  1. 1. Designing on a Local System
  2. 2. <ul><li>Test and experiment with new features or plugins without impacting online site </li></ul><ul><li>Work offline with no internet connection </li></ul><ul><li>Present prototypes and live demos to clients without needing a connection </li></ul><ul><li>Design using Dreamweaver CS5.x </li></ul>
  3. 3. <ul><li>Apache, MySQL and PHP installed </li></ul><ul><ul><li>Mac: MAMP – http://www.mamp.info/en/index.html </li></ul></ul><ul><ul><li>Windows: WAMP – http://www.wampserver.com/en </li></ul></ul><ul><li>WordPress </li></ul><ul><li>Themes & plugins stored locally to “upload” (when working offline) </li></ul><ul><li>Browser of choice </li></ul>
  4. 4. <ul><li>Download setup file </li></ul><ul><li>Install as any other Mac application </li></ul><ul><li>Will offer Pro version as option – free version is all that is needed </li></ul>
  5. 5. <ul><li>Download setup file </li></ul><ul><li>Install WAMP </li></ul><ul><ul><li>Click on Wampserver 2 setup file </li></ul></ul><ul><ul><li>Follow prompts </li></ul></ul><ul><li>Put online </li></ul><ul><li>Set MySQL password (see Appendix) </li></ul>
  6. 6. Lynda.com has step-by-step tutorials for installing MAMP/WAMP and WordPress locally.
  7. 7. <ul><li>Create database </li></ul><ul><li>Create folder for WordPress files </li></ul><ul><ul><li>Windows: C:wampwwwsitename </li></ul></ul><ul><ul><li>Mac: ApplicationsMAMPhtdocssitename </li></ul></ul><ul><li>Copy WordPress files to folder </li></ul><ul><li>Install as usual: http://localhost/sitename/wp-admin </li></ul>
  8. 12. After installing WordPress, install any themes you want to use.
  9. 13. This Genesis theme (Church) allows for different color themes.
  10. 16. Use Live View to see the page design in Dreamweaver.
  11. 17. Clicking on areas of the page, changes the display of div and class settings for that section. By clicking on a “div”, the properties defined in the css are shown.
  12. 18. I want to eliminate the background image in the body and change it’s color. I can “comment out” the image, and add a new property.
  13. 19. To add a background color that is consistent with the rest of the page, I can hover the mouse over and area (eyedropper not visible in screenshot) and Dreamweaver will fill in the hex code.
  14. 20. I’ve settled on the background color for the wrapper.
  15. 21. To view my changes live, I simply go to the browser.
  16. 22. I’m going to change the header in Dreamweaver. In this case I will edit by clicking the edit button (pencil).
  17. 24. Now I need to adjust the padding on the title area so the text and logo don’t overlap.
  18. 26. Letting Dreamweaver “Discover” dynamically related files, let’s you find linked php files such as footer.php easily.
  19. 27. WordPress sites have LOT of dynamically related files. Filtering allows you to display only those of interest.
  20. 29. There are three footer files. The last is the Genesis framework and should not be edited. This one defines the layout of the footer and calls the shortcodes.
  21. 30. This footer.php defines the shortcodes themselves. You now have the option to edit and customize the footer.* *This is being shown to illustrate the power of Dreamweaver CS5. However, for Genesis themes, using the Genisis Simple Edits plug-in is a simpler way.
  22. 32. <ul><li>Installing MAMP / WAMP </li></ul><ul><li>Screenshots from Lynda.com </li></ul>
  23. 46. Setting MySQL password
  24. 47. MySQL version will vary depending on when you downloaded.
  25. 52. You will need a text editor to edit config.inc to include the password.
  26. 55. After setting the MySQL password, restart all services.