Customizing a WordPress site with a Theme and a Silverlight Photo Album

Author: Florent Pajani

This article is part of a video training series available on the Expression Community site. Through this article, we will start by customizing WordPress with a specific theme. Then, we’ll add a Silverlight photo album on the home page and customize it with Expression Blend.

This article has been inspired by a French cottage site – Fleur des Salines – that is using the power of the Microsoft Web Platform with WordPress.

Getting Started with WordPress

To get started for this article, you will need a WordPress site running locally or running online. If you don’t have one, you can get one in few clicks through the Web Platform Installer. The Web Platform Installer is really the quickest way to install IIS, PHP and WordPress in less than 2 minutes. If some assistance is required, I advise you to watch “ 01 – Web Platform and WordPress”.

Change the WordPress Theme

1. Download the Fleur des Salines theme from the Expression Gallery. This theme is the one used by Fleur Des Salines.
2. In this asset folder, you should find a theme folder named fleur-des-salines. Copy this folder to your server under folder wwwroot/wordpress/wp-content/themes. Adjacent to this folder, you should find the "classic" and "default" theme folders of WordPress.
3. Login to your WordPress site by navigating to http://www.yourdomain.com/wordpress/wp-admin.
4. Expand the Appearance menu, and then select Themes. You should see the Fleur des Salines theme under Available Themes as shown below.
   
   
5. Click on the "Activate" link below this theme so that it becomes the current theme.
   
   
6. Confirm the operation of the new theme by opening up your site in IE at “http://www.yourdomain.com/wordpress”. If you already have your site open in IE, you will need to press F5 to refresh the page. It should appear as shown below.
   
   

Customize the WordPress Theme for Your Site

1. Back in your WordPress admin page, open the Fleur des Salines panel under the Appearance panel. Then change the default logo graphics for both the main page and sub pages. Follow the examples below:
   Homepage logo:
   …wordpress/wp-content/themes/fleur-des-salines/images/Fleur_Des_Salines_Large.gif Inside logo: …wordpress/wp-content/themes/ fleur-des-salines/images/Fleur_Des_Salines_Small.gif Background image: …wordpress/wp-content/themes/fleur-des-salines/images/background.jpg
2. In the WordPress Settings panel, replace “Just another WordPress blog” with “A cottage with 6 rooms for 12 people, near the heart of the salt marsh of Guérande”
3. Create an empty page called "Home" by expanding the Pages panel and clicking on Add New. Then click the Publish button.
   
   

Set the WordPress Page as a Static Home Page

1. Expand the WordPress Settings menu, then click on Reading.
2. For the Front page display setting, select "A static page (see below)", then in the drop-down to the right of "Front page:", select "Home". This will make the home page you just created the main page of your WordPress site.
   
   
3. Click Save Changes and open your WordPress site in IE to see the main page. It should be similar to the following with the exception of the menu.
   
   

Publishing a Silverlight Photo Album to Your Website

This section shows you how easy it is to incorporate a Silverlight Photo Gallery into your website, using a free plugin that is available as a direct download from WordPress.

Add the Silverlight Photo Gallery Plugin to Your WordPress Site

1. The photo gallery that appears on the main page of the original Fleur des Salines website is actually available as a direct download from WordPress. To start, you will need to open the Plugins panel from your WordPress admin page and enter "Silverlight" in the search box. After you click the Search Plugins button, you should see the Silverlight Gallery plugin.
   The plugin is highlighted in yellow in the screenshot below.
   
2. Once you have located the plug-in, click the Install link. You will then be presented with the plugin details window from which you may wish to take some notes prior to clicking the Install Now button.
   
3. Next, you will need to activate this plug-in before you can use it on your WordPress site.
   
4. You are now ready to edit the Home page of your WordPress site. Simply click the Pages panel on your WordPress admin page and click the Edit link under the Home page post.
   

Add Images to Your Silverlight Photo Gallery

1. For your gallery, you will need some images. Sample images for this tutorial have been conveniently included in the assets folder of this lesson. Click the Add an image icon as shown below.
   
2. Select the three images provided in your images folder, and then click the Open button.
   
3. You may then simply close the Add an Image panel
   

Add the Photo Gallery to Your Website

1. In WordPress, select the HTML view, then click the insert Silverlight Gallery icon.
   
2. In the options window that appears,
   1. check all boxes except Display preloader, and
   2. provide a value of #303639 for the Background color. This is the matching background color of your WordPress theme.
   
   
3. After you click the Insert button, your post should appear as shown below. Note that you may change any settings by editing the text.
   
4. You are now ready to click the Update button to publish these changes to your website.

Now, when you now open the main page of your WordPress site, you should have the ability to navigate through the three images you uploaded. Simply click the expandable left and right arrow buttons that appear over the image. You may also notice the ability to directly select an image by clicking on its thumbnail. The image thumbnails will appear when you hover your mouse over the bottom of the current image.

Customizing the Silverlight Photo Album with Expression Blend

You are now ready to customize this Silverlight Gallery plugin using Expression Blend.

Change the Silverlight Gallery Appearance using Expression Blend

1. Open Expression Blend and load the solution file (pluginSL.sln) for this Photo Gallery which should appear in the pluginSL folder of the assets of this lesson. You may either open this solution file directly from Blend, or double-click the solution file if the .sln extension is associated with Expression Blend.
2. Once the Silverlight Gallery project is open, double-click the Diaporama.xaml file in the Projects panel to open it if it is not already open.
3. You must build the project to remove the Invalid XAML error message that appears when you open the main page: Diaporama.xaml. To rebuild the project, press CTRL+SHIFT+B on your keyboard, or choose Build Project from the Project menu. You may alternatively press F5 to build and run the project in your browser to validate its operation.
4. With the project built, your Diaporama.xaml page should appear as follows (assuming you are in the code view mode).
   
5. You will notice the two arrow buttons on the page: (<) and (>). Let's go ahead and customize these buttons by changing the background color from white to another color.
6. Since these buttons are based on a style resource, you cannot change their appearance directly from Diaporama.xaml. You must instead open the StylesAndTemplates.xaml file to access the button resource from there.
7. With the StylesAndTemplates.xaml file open, click on the Resources tab (to the right of the properties tab), select the DiaporamaButtonStyle resource (which is the far the right button), and click the Edit resource button to edit it.
   
8. In the Objects and Timeline panel, right-click the Style object, and choose Edit Template | Edit Current.
   
9. Also in the Objects and Timeline panel, select the [Rectangle] object. Note that you may need to expand the [Grid] object in order to see it.
10. In the properties panel, make sure you have selected both the Fill and Solid Color Brush options. You may then choose any color you desire for the fill color of the button.
    
    
    
    
11. Following the same procedure to change the fill color of the DiaporamaLeftButtonStyle resource.
12. With your customizations complete, press F5 to build and preview your Silverlight photo gallery in your browser.

Upload the Customized Silverlight Gallery to Your Server

1. If all is well, you are ready to copy the XAP file from your client development computer to your server. You will find the pluginSL.xap file in the ClientBin folder under the pluginSLSite folder as shown below.
   
2. From this folder, copy the pluginSL.xap file to your server over the existing pluginSL.xap file. This file should be found in the ClientBin folder nested under your WordPress plugins folder as a direct child of the silverlight-gallery folder.
   
3. The last step is to confirm your changes by opening or refreshing the main page of your WordPress site in Internet Explorer.