Tehtävänä on rakentaa uusi teema, käyttäen pohjana valmista runkoa. Alkuperäinen tutoriaali, joka on englanniksi ja jossa on selitetty tarkasti myös paikallisen testiserverin rakentaminen, löytyy täältä:

1. Editing a WordPress theme with Dreamweaver CS5 – Part 1: Learning the basics
2. Editing a WordPress theme with Dreamweaver CS5 – Part 2: Setting up your site
3. Editing a WordPress theme with Dreamweaver CS5 – Part 3: Adding a logo, header styles, and menu
4. Editing a WordPress theme with Dreamweaver CS5 – Part 4: Building a custom home page

Lataa teema tästä: MyTheme.zip
Lataa tästä korjattu sidebar.php tiedosto ja siirrä se MyTheme -kansioon ja korvaa vanha tiedosto sidebar.zip

Asennus:

1. avaa paketti
2. siirrä MyTheme -kansio palvelimelle omaan wordpressiin ( wp-content/themes/ -kansioon )
3. ota uusi teema käyttöön (ulkoasu -> themes)

Logon luonti:

Etsitään maksimikoko logolle

1. Avataan wordpress sivu esim. firefoxissa ja käytetään firebug-lisäosaa. (myös chromessa ja safarissa on oma vastaava valmiiksi)
2. Klikataan sivun yläosaa hiiren oikealla napilla ja valitaan valikosta inspect, jotta näemmä elementin css-määritykset.
3. Valittu elementti tulisi olla .bannerArea .container, josta logon maksimi korkeus lötytyy

Luodaan uusi logo

1. Tee uusi kuva jonka korkeus on maksimissaan löytämäsi korkeus.
2. Tallenna uusi logo MyTheme/images/ -kansioon.

Logon asettaminen teemaan

1. Avaa teeman header.php tiedosto, joko dreamweaverissa tai wordpressin ulkoasumuokkaimessa
2. Etsi koodista rivit:

   <p class="title"><a href="<?php echo get_option('home'); ?>/">
         <?php bloginfo('name'); ?>
         </a><br />
         <span class="description">
         <?php bloginfo('description'); ?>
         </span></p>

3. Poista nämä rivit
4. Lisää poistettujen rivien tilalle kuva (img -tagi)

Logon kuvan osoitteen korjaus ja linkityksen tekeminen

Kuva sijaitsee teemakansiossa, joten tarvitsemme php-funktion joka kertoo mikä on ko-teemakansion sijainti. Käytämme wordpressin funktiota bloginfo('template_url')

Toinen funktio jota tarvitsemme on funktio, joka kertoo etusivumme url-osoitteen. Tämä funktio on get_option('home')

1. Muutetaan logon koodia:

   <img src="images/logo.png" width="300" height="83" alt="logo" />

   tällaiseksi:

   <img src="<?php bloginfo('template_url'); ?>/images/logo.png" width="300" height="83" alt="logo" />

2. Tehdään logosta linkki etusivulle:

   <a href="<?php echo get_option('home'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" width="300" height="83" alt="logo" /></a>