DESIGN A WORDPRESS THEME IN ADOBE PHOTOSHOP - CHRISTOPHER

1、 Design A WordPress Theme in Adobe PhotoshopJanuary 19, 2013Chris AndersonCopyright Information© 2013 by Chris Anderson.This document, including graphics and illustrations was completed as the final requirement for the Technical Writing Certificate at Bellevue College, Technical Writing Capston

2、e, winter, 2012.ContentsIntroduction4Design a WordPress theme in Adobe Photoshop:4Install WordPress locally:4Recommended skills:5System requirements:5Caution:5The anatomy of a WordPress theme:5PHP5CSS6How it fits together:6Set up Instant WordPress:6Create the Theme Files:7Create the core theme files

3、:7Design your WordPress theme in Adobe Photoshop:10Set up the theme template (fig. 4):10Create a textured background (fig. 5):12Create a content area (fig.6):13Create a header (fig. 7):14Create a footer (fig. 8):14Create a sidebar (fig. 9):15Create a title image (fig. 10):16Export the Photoshop docu

4、ment:16Export the background:16Export the content areas:16Add images with CSS:17Edit the WordPress code:18Divide the HTML code:18Add PHP get variable:19Add “The Loop”:19Install your theme online:20Conclusion20References21Appendix A: Theme Folder Files:22222326IntroductionThe purpose of this guide is

5、 to help you design and implement your own WordPress theme using Adobe Photoshop as the primary design tool. WordPress is a platform for developing and maintain blogs and websites. It is open source and supported by thousands of developers creating automation, plugins, and stable theme testing envir

6、onments.A WordPress theme is a collection of files that allow you to change the appearance and functions of a WordPress website without editing content. For example, you might have a WordPress blog that you have maintained for several years. There may come a time when you decide that the blog needs

7、a new design, but you do not want to start over with new content. You can download a free theme or purchase one, and simply install it using the WordPress dashboard. The other alternative is you can design your own theme.With Photoshop, you can focus on the design elements of your theme before editi

8、ng code. You can establish pixel dimensions for your theme, and all the included elements. You can lay out your theme using the same dimensions you defined in your Photoshop design.In this guide, you will: · Install WordPress on your local computer and use the local install as a testing platfor

9、m your design.· Learn the anatomy of a WordPress theme. · Design your theme in Adobe Photoshop and then slice the document into sections and implement them with HTML and CSS code. · Install your finished theme online.Recommended skills:Since this guide is a tutorial, you only need bas

10、ic knowledge of Photoshop and web programming. You should be familiar with WordPress, its installation process, and user interfaceDesign a WordPress theme in Adobe Photoshop:The editing tools in Photoshop allow you to create a unique and visually appealing layout for your theme. You can use pixel di

11、mensions from your mockup theme to properly fit inside a web browser. Complex images such as overlapping menus or glowing content areas can be created in Photoshop and implemented easily into WordPress with simple code editing. Once finished, you can use Photoshops Slice tool to export each element

12、of your theme into its own image file and upload each element into your themes image folder.Install WordPress locally:It is a good idea to install WordPress on your local computer. It will make testing your theme faster and easier. A WordPress blog is different than other static websites because it

13、relies on multiple PHP files to display the content online. By installing WordPress locally, you do not need to search for theme folders or worry about losing data on your current WordPress blog. Installing WordPress locally gives you a stable platform to make changes to your website and to build ad

14、ditional websites.System requirements: The system requirements for this guide are:· An Internet connection.· Microsoft Windows 8, Windows 7, Windows Vista, or Windows XP.· At least one web browser (minimum: Internet Explorer 9. Recommended for compatibility testing: Chrome, FireFox, O

15、pera, and Safari).· A registered WordP blog.· Adobe Photoshop (CS3, CS4, CS5, or CS6).· A plain text editor (Notepad+ recommended, available at: ).Caution:Do not attempt this tutorial on your live WordPress account. To ensure that your files are not deleted or corrupted, follo

16、w the section on installing a local WordPress environment. The anatomy of a WordPress themeBefore beginning the design process, it is a good idea to have an understanding of how WordPress themes work. In this section you will learn about the basic parts of a WordPress theme and how they fit together

17、 to make a functioning website. PHPInstead of HTML pages, WordPress uses Pre-Hypertext Preprocessor (PHP) files to get information and display it online. The advantage of using PHP files over HTML files is that PHP is dynamic, whereas HTML is static. This means that one PHP file can display the same

18、 information throughout a website, while in HTML new code must be written to display the same information each time.When used in WordPress, PHP files contain HTML code, or PHP functions to automatically display information contained in a database. This guide does not require you to write PHP code, b

19、ut designing more advanced themes requires knowledge of PHP. In this tutorial, you will be working with the following PHP files:·····In Photoshop you will create a single layout that uses each of these PHP files.Most WordPress themes contain more PHP files that handle tasks

20、such as archiving, comment forms, and automated scripts. For this tutorial, you only need to create the files listed above.CSSWith Cascading Style Sheets (CSS), you can add style (e.g., fonts, colors, spacing) to your website. Like PHP, CSS enables you to change the appearance of your entire website

21、 with only one file rather than editing individual HTML files.For this tutorial, you will create a CSS file named Style.css. This file contains all of the style information for your theme.How it fits together:Index.php is the primary file in a WordPress theme. It contains calls to all the other PHP

22、files containing HTML code, which are then displayed like a static HTML filefiles (Fig. 1).Figure 1. Index.php calls all the theme files and displays them in a readable form.Set up Instant WordPressIn this section you will select a WordPress development environment and install WordPress on your comp

23、uter. Instant WordPress is a free and a quick way of installing WordPress on your computer. 1. Download Instant WordPress at , 2. Run the installer and follow the installation instructions.3. Launch Instant WordPress.4. Click Themes Folder to open Windows Explorer.5. In the Themes folder, create a n

24、ew folder named Mytheme.6. In the Mytheme folder, create another folder named Images.Create the Theme FilesIn this section you will set up WordPress on your computer and create the necessary theme files. The code for each file in this section is found in Appendix A: Theme Folder Files. Create the co

25、re theme files:1. Using the InstantWP dashboard, create a new folder name Mynewtheme.2. Using a text editor, create the theme files and place them in the Mynewtheme folder:·····3. Copy and Paste the code from Appendix A: Theme Folder Files into each corresponding file.4. In

26、Instant WordPress, log on to the WordPress Dashboard and click View Site. The page appears without style (fig. 2).5. Create a Style.css file and Copy and Paste the code from Appendix A: Theme Folder Files. The theme will now appear with a layout, colors, fonts, and typeface (fig. 3).Figure 2. The th

27、eme currently has no style information.Figure 3. The theme now contains style information. The colored backgrounds indentify each element.Design your WordPress theme in Adobe PhotoshopIn this section you will create the layout for your WordPress theme. Using Photoshop, you can experiment with color,

28、 shapes, effects, and graphics prior to editing code in a text editor. Once the design is complete, you can use the Slice Tool to divide your theme into sections with the exact dimensions needed to display properly online.Set up a theme template (fig. 4):1. Open a new Photoshop Document file with th

29、e following settings:· Width: 950 pixels· Height: 950 pixels· Resolution: 72· Color Mode: RGB, 8 bit· Background Contents: White 2. On the View menu, click New Guide. Using guides will ensure that each element has the correct dimensions and later can be sliced to individual

30、image files. Set the guides to the pixel dimensions shown in table 1.Horizontal GuidesVertical Guides· 100 pixels· 200 pixels· 250 pixels· 800 pixels· 870 pixels· 90 pixels· 630 pixels· 640 pixels· 840 pixelsTable 1. Guides help create a mockup theme with

31、 correct dimensions.Figure 4. Using guides will ensure that the mockup theme will translate to the webCreate a textured background (fig. 5):1. Create a new layer above of the background layer named Bg_texture. 2. Use the Paint Bucket Tool to fill the layer with color #333333 (Charcoal). 3. On the Fi

32、lter menu, in the Artistic group, click Rough Pastel.4. Move the sliders to the following settings and Click OK:· Stroke Length: 20· Stroke Detail: 10· Scaling: 85%· Relief: 15 Figure 5. The mockup theme now has a textured background.Create a content area (fig.6):1. Create a new

33、layer above Bg_texture named Bg_wrapper.2. At the top of the document, use the Rectangle Tool to place a 820 by 1000 pixels rectangle at between the vertical guides at 80 pixels and 900 pixels.3. Fill the rectangle with the color #FFFFFF (white).4. On the Layer menu, in the Layer Style group, click

34、Inner Shadow.5. Use the following layer effect settings for the Inner Shadow and click OK: · Blend Mode: Multiply· Opacity: 100%· Angle: 120 degrees· Distance: 0 pixels· Choke: 0 pixels· Size: 250 pixels· Noise: 8%Figure 6. The mockup theme now has a content area t

35、hat contrasts with the background.Create a header (fig. 7):1. Create a new layer above Bg_content named Bg_header.2. With the Rectangle Tool, place a rectangle (780 by 50 pixels) at the top of the document between the vertical guides at 100 and 880 pixels.3. Fill the rectangle with color #66cc33 (li

36、ght green). 4. Place a rectangle (780 by 50 pixels) on top of the first, between the horizontal guides at 250 and 300 pixels and the vertical guides at 100 and 880 pixels.5. Fill the rectangle with color #333333. Figure 7. The mockup theme now has a header with room for a banner or title and a navig

37、ation bar.Create a footer (fig. 8):1. Create a new layer above Bg_content named Bg_footer.2. With the Rectangle Tool, to place a rectangle (780 by 50 pixels) at the bottom of the document between the vertical guides at 100 and 880 pixels and the horizontal guides at 850 and 900 pixels.3. Fill the re

38、ctangle with color # 333333.Figure 8. The mockup theme now has a footer area for additional links and copyright information.Create a sidebar (fig. 9):1. Create a new layer above Bg_content named Bg_sidebar.2. Place a rectangle between the vertical guides at 670 pixels and 880 pixels. The height of t

39、he rectangle should overlap the header and the footer by at least 20 pixels.3. Fill the rectangle with color #52730a (dark green).4. On the Layer menu, in the Layer Style group, click Drop Shadow.5. Increase Distance to 10 pixels, Spread to 0%, and Size to 5 pixels, then click OK. 6. On the Layer me

40、nu, in the Layer Style group, click Blend Options.7. Move the Opacity slider to 75% and click OK.Figure 9. The mockup theme now has a sidebar for category lists, links and a search bar. The Opacity and Drop Shadow effects give the sidebar a “floating” appearance.Create a title image (fig. 10):1. Cre

41、ate a new layer above the Bg_header layer named Title_image.2. On the Character panel, in the Typeface dropdown menu, choose the Bauhaus 93 typeface with a 72 point font and the color # 333333. 3. With the Horizontal Type Tool, enter your sites title in the center of the header.4. On the Layers pane

42、l, Right-click the Title_image layer and select Warp Text.5. Adjust the values in the Warp Text menu to the following settings:· Bend: 65%· Horizontal Distortion: -5%· Vertical Distortion: 5%Figure 10. The mockup theme now has a title image. Export the Photoshop document:In this secti

43、on you will slice your theme design into separate image files and place them in the images folder of your theme.Export the background:1. In the Layers panel, hide all the layers except the Background, Bg_wrapper, and Bg_texture layers.2. Press Ctrl + Shift + S to save the Bg_texture layer as its own

44、 image.3. On the Format drop down menu, select JPEG and click Save.4. In JPEG Options, Set the Quality value to 8.Export the content areas:1. Show all the hidden layers, except Title_image.2. Hide the Bg_texture, Bg_wrapper, and Background layers.3. Save a copy of the document as Mytheme.4. On the L

45、ayers pane, Right Click and select Merge Visible.5. On the View menu, in the Snap To group, click Guides.6. Using the Slice tool, slice the content areas to the following dimensions:· Header: 960 by 250 pixels· Content: 640 by 1 pixels· Sidebar: 320 by 1 pixels· Footer: 960 by 25

46、0 pixelsNote: The slices named Content and Sidebar have a height of 1 pixel because the CSS style sheet repeats the image on the Y axis to allow for scalable content.7. On the File menu click Save for Web & Devices.8. Select each slice and save as a separate .png file into the Mytheme/Images fol

47、der. Each file name should include the slice dimensions. When finished you should have the following files:···· footer_958x250.png Add images with CSS:In this section you will add the images you created in Photoshop to your style sheet, and preview your finished theme in a static

48、 html page. Note: Before editing you Style.css file, you should create a backup before editing any code. This will ensure that you can recover from mistake. Also, if you decide to redesign your theme, you will have a clean copy to go back to. 1. In the Mytheme folder, open style.css in a text editor

49、.2. For each element, replace the background color with the corresponding background image.3. Open Index.html in a web browser to see the results (fig. 11).Figure 11. The mockup theme now looks like an active WordPress blog.Edit the WordPress code:In this section you will apply your layout to your W

50、ordPress theme. The index.html you created in the last section references the same Style.css file as your WordPress theme. With a static html page, the next step is to copy each div element from the html page and paste it into its respective .php file.Divide the HTML code:1. Open the PHP files in yo

51、ur theme folder:····2. Cut and Paste the HTML code in the index.html file from the header element into header.php.3. Repeat the previous step for each remaining element.4. Copy the following declaration and paste it in the header.php file:/*Theme Name: Replace with your Theme'

52、;s name.Theme URI: Your Theme's URIDescription: A brief description.Author: Your nameAuthor URI: Your website address.*/5. Fill in your information.Add PHP get variable:In PHP, get functions within a file call on other files to display information. WordPress uses PHP so that individual elements

53、may be edited without needing to edit code on every page. In this section you will add get functions to the index.php file to display the header, content, sidebar, and footer of your theme.1. Copy the following code and paste it on the first line of the index.php file:<?php get_header(); ?>2.

54、Copy the following code and paste it on the last two lines of the index.php file:<?php get_sidebar(); ?><?php get_footer(); ?>Add “The Loop”:The Loop is PHP code WordPress uses to display content. There are examples of The Loop in the WordPress Codex. For your theme, you need a simple lo

55、op.1. In , copy and paste the following code in between the header, and the sidebar and footer: <div id="blog"> <?php if(have_posts() : ?><?php while(have_posts() : the_post(); ?> <div class="post"> <h3><a href="<?php the_permalink(); ?>

56、;"><?php the_title(); ?></a></h3> <div class="entry"> <?php the_post_thumbnail(); ?> <?php the_content(); ?> <p class="postmetadata"> <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <

57、;?php _e('by'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?> </p>

58、</div> </div><?php endwhile; ?><?php endif; ?> </div> 2. Save your files and activate your theme on the Instant WordPress Dashboard.3. Test your theme in a web browser.Install your theme online:1. Using an FTP client or cPanel, upload the Mytheme folder to your WordPres

59、s themes folder.2. Log on to your WordPress Dashboard3. On the Appearance menu, click Themes.4. Locate your new theme and click Activate.5. To verify your results, click Visit Site.ConclusionUsing the techniques in this tutorial, you should be able to design themes in Photoshop that can easily be ad

60、apted to WordPress sites. An important thing to remember is to pay attention to the dimensions in your layout. To create different layouts than the one shown, you only need to change the placement of the guides in your Photoshop document. After your layout is set, edit the code in your style.css file according to your layout. In this tutorial, you created