Editing a WordPress theme with Dreamweaver CS5 - JWarren ...

 

Editing  a  WordPress  theme  with  Dreamweaver  CS5   http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html   http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html   http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html   http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html   By  Brian  Wood  

 

 

Dreamweaver  

Editing  a  WordPress  theme  with  Dreamweaver  CS5  –  Part  1:  Learning  the  basics   http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html   •

•

•

•

•

2  

Introduction   o The  most  popular  blog  software  today    Has  emerged  into  a  full  content  management  system   o The  beauty  –  the  separation  of  content  and  style    The  content  is  stored  in  a  MySQL  database   Pieces  of  the  WordPress  puzzle   o Two  options    Host  WordPress   • You  will  need  PHP  and  MySQL  on  your  computer   • Set  up  WordPress  on  your  machine    Host  the  blog  through  WordPress.com   How  WordPress  works   o Lots  of  files  are  installed    These  allow  WordPress  to  run  your  blog   o You  use  the  administration  area  to  run  your  blog    Also,  tell  WordPress  which  theme  to  use   o The  WordPress  files    Assemble  the  page  based  on  the  options  you  set   o You  don’t  need  to  rebuild  all  of  your  pages  each  time  the  blog  is  updated   The  WordPress  template  file  hierarchy   o Like  pieces  of  a  puzzle    When  added  together  they  form  complete  web  pages   o Some  pages  are  used  on  every  page  of  your  blog    header    footer   o index.php  is  required  in  every  theme   o home.php    Takes  precedence  over  index.php   The  WordPress  page  structure   o Open  index.php    Code  View   o Three  basic  sections    header    content    footer   o Other  pages  are  referenced  from  the  theme  directory   o Look  for  these  three  lines  of  code       php  get_sidebar();  ?>    php  get_footer();  ?>    By  having  three  separate  files,  allows  consistency  among  the  other  pages  in  the   site   o Find  this  code:     

Editing  a  WordPress  theme  with  Dreamweaver  CS5   This  determines  if  there  are  any  blog  posts   It  loops  through  all  of  them  and  display  each  post   • Until  the  loop  criteria  has  been  satisfied    These  blog  posts  com  from  the  MySQL  database   Taming  WordPress  with    Dreamweaver  CS5   o Dreamweaver  has  a  variety  of  excellent  tools  for  creating,  editing,  and  viewing   WordPress  theme  files    Code  hinting    Highlights  invalid  code    Enables  you  to  preview  your  WordPress  theme  using  Live  View    Allows  you  to  explore  it  through  Live  Cod  view    

•

Editing  a  WordPress  theme  with  Dreamweaver  CS5  –  Part  2:  Setting  up  your  site   http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html   •

•

The  basics  of  previewing  WordPress  themes  in  Dreamweaver  CS5   o For  WordPress  to  work:    You  need  to  have  a  local  web  server    Install  WordPress    Create  a  site   o How  does  it  work?    Without  a  local  web  server,  Dreamweaver  cannot  preview  the  WordPress  php   files    Typically  installed  in  a  folder  in  the  web  server    Themes  are  kept  in  the  WordPress  folders   o Setting  up  your  local  web  server    It  is  easiest  to  use   • Windows:  XAMP   • Mac  OS  X:  MAMP   Installing  WordPress   o Download  the  latest  release  of  WordPress   o Place  the  file  in  the  htpdocs  folder   o Create  a  simple  database    Open  phpMyAdmin   • Below  the  text  box  labeled  Create  new  database   o Type:  wordpress   o Click  Create   • Click  the  Home  icon  in  the  upper  left   o Click  Privileges   o Click  Add  a  New  User   o Enter  a  username  (dreamweaver)  and  password  (development)   o Re-­‐enter  the  password  (development)   o Leave  everything  at  its  default   o Click  Go   • Return  to  the  Privileges  page   o Click  Edit  Privileges   o Select  the  wordpress  database   o Click  Check  All  

3  

Dreamweaver  

•

4  

o Click  Go   o Go  to:  http://localhost/wordpress/wp-­‐admin/install.php    Click  Create  configuration  file    Click  Let’s  Go    Enter   • database  name:  wordpress   • username:  dreamweaver   • password:  development   • database  host  type:  localhost   • Click  Submit   • Click  Run  Install    Enter  the  information  for  your  WordPress  site:   • Set  Title:  Dreamweaver   • Username:  admin   • Password:  development   • Email  address:  enter  your  email  address   • Click  Enter   Install  the  theme  files  and  set  up  your  site  in  Dreamweaver   o Installing  the  theme  files    Copy  the  MyTheme  folder  into  the  WordPress  themes  folder   o Set  the  theme  in  WordPress    Go  to:  http://localhost/wordpress/wp-­‐admin/    Log  in  to  WordPress    Click  Appearance   • Select  the  Adobe  Developer  Connection  Theme  1.0  by  Codify  Design   Studio   • Activate  this  theme    Go  to:  http://localhost/wordpress/   • Make  sure  the  theme  is  active  for  your  blog   o Setting  up  your  site  in  Dreamweaver    Site  >  New  Site   • Site  Setup  for  Unnamed  Site  dialog  box   o Site  name:  blog   o Local  site  folder:  wordpress  folder   o Click  on  Servers  (the  left  side)    Click  the  Plus  button   • Stay  in  Basic   • Server  Name:  localhost   • Connect  using:  Local/Network   • Server  Folder:  wordpress  folder   • Web  URL:  http://localhost/wordpress/   o Setting  up  site-­‐specific  code  hinting    Dreamweaver  can  have  WordPress-­‐specific  PHP  code  hints    Dreamweaver  supports  three  frameworks  by  default:   • Drupal   • Joomla!   • WordPress    Site  >  Site-­‐Specific  Code  Hints  

Editing  a  WordPress  theme  with  Dreamweaver  CS5   Site-­‐Specific  Code  Hints  dialog  box   o Structure:  WordPress   o Click  the  Select  Sub-­‐root  Folder  button    Tot  the  right  of  the  Sub-­‐root  text  box   o Click  OK   • Notice  the  dw_php_codehinting.config  file  added   o Do  not  delete   Testing  code  hinting    Easiest  way  to  see  if  it  works    Open  index.php   • wp-­‐content/themes/MyTheme    After     • Type: