Editing Wordpress in Dreamweaver

  • 11,838 views
Uploaded on

 

More in: Self Improvement
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,838
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
112
Comments
1
Likes
3

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)
    Luke Kilpatrick
    Twitter Tag: #adobemax87
  • 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
  • 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!
  • 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
  • 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
  • 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
  • 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
  • 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:siteswordpressdemo – or something similar
  • 9. Create your Database
    Go to http://localhost/phpmyadmin/ or to http://localhost:8888/phpmyadmin/
    Create a new database called wordpress
  • 10. Change your root directory in httpd.conf
    Open C:xamppapacheconf
    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.
  • 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
  • 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!
  • 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!
  • 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
  • 15. The WordPress Dashboard
  • 16. WordPress Posts
  • 17. WordPress Pages
  • 18. WordPress Comments
  • 19. Look at the live site
    Go to http://localhost/
    Lets change how it looks….
  • 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/
  • 21. WordPress Appearance
    In the admin, select the appearance menu
    Activate the magicblue theme
    View the site
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 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?