Creating a Website with Wordpress

Transcription

1 Creating a Website with Wordpress Wordpress Fundamentals Version 1.6 Fayette County Public Schools June 28, 2013 Sow-Foong Hedman Technology Web Team

2 Contents What is Wordpress?... 4 Overview... 4 Key Concepts and Terminology... 4 Blog... 4 Posts and Pages... 4 Dashboard... 5 Themes... 5 Categories and Tags... 5 Site Components... 6 Logging In... 8 Requesting an FCPS Site/Blog... 9 Choosing a Theme Working with the Twenty Eleven Theme Setting a Custom Header Setting a Custom Background Setting Theme Options Working With Pages Adding a Page Editing a Page Using Page Templates Assigning a Page Template Working with Posts Adding a Post Editing a Post Managing Categories and Tags Creating a Category Assigning a Category Assigning a Tag Adding Media Adding Images to a Page or Post Adding Videos to a Page or Post

3 As a Link to the Video As an Embedded Video Adding Files to the Media Library Adding Links Other Custom Options Making a Static Page the Home Page Customizing the Menu(s) Using Plugins Adding a Contact Form Using Widgets Embedding a Twitter Feed Working with Comments Allowing /Disallowing Comments in Pages/Posts Managing Comments Good Housekeeping Appendix A - Themes with Sliders Catch Box, Max Magazine and zeemagazine Comparison Catch Box Layout Max Magazine Layout zeemagazine Layout Setting Catch Box Theme Options Theme Options Featured Slider Slider Options Featured Slider Slider Effect Options Social Links Header Logo Custom Background Tips Setting Max Magazine Theme Options Homepage Settings Ads and Custom Styles (Header Add and Background Color) Tips

4 Setting zeemagazine Theme Options Theme Layout Featured Post Slider Social Media Buttons x60 Header Ad Spot Custom Header Banner Custom Background Widgets

5 What is Wordpress? Overview Wordpress is web software that makes it easy for you to create a website and to publish the content to the Internet. It started off as a blogging system but has evolved into a full content management system (CMS) that is used for creating websites that are more than blogs. Wordpress is very useful for creating websites that have a blog component to it. Blog is the abbreviation for weblog, a term used to describe web sites that maintain an ongoing chronicle of information. Key Concepts and Terminology This section briefly describes some useful basic concepts and terminology when using Wordpress. For a comprehensive glossary of Wordpress and Web terms, go to Blog Blog is the abbreviation for weblog, a term used to describe websites that maintain an ongoing chronicle of information. The information is usually presented in reverse chronological order. Generally, there is an archive of older articles and a blog allows readers to leave comments. In the context of a teacher s website, these features of a blog make it suitable for posting information such as homework and class news. Sites created in Wordpress automatically have a blog page. Posts and Pages There are two main types of content in Wordpress that are used for very different purposes Posts and Pages. Posts are the main elements of a blog. They refer to the individual articles that are posted to the blog in Wordpress. Examples of posts are Homework for January 15, Class Trip Info, etc. Pages are usually used to present information that does not change often such as an About page or Contact page. Pages are static in nature and different from a blog. Pages should not be confused with posts. The main differences are listed below. Post Presented with other posts, usually in reverse chronological order Transient, time sensitive content (ephemeral content) e.g. homework for each day Relational material (through the use of Categories and Tags) e.g. homework May be organized and displayed by author, time, category and tag Page Is a separate page on its own, has its own tab on the main menu. Static content e.g. About Me page Singular elements e.g. an About Me page contains information that is not related to information on other pages 4

6 Dashboard The Dashboard is the administrative panel that summarizes information about the site from which a user may navigate to different controls to administer and monitor the website (compare to the dashboard of a vehicle). From the Dashboard, a user may create/edit pages and posts, change the appearance and other settings of the website, manage comments, and much more. Themes The theme determines the way that the site is displayed. You can change the look and feel of your site by changing the theme. The theme can be changed at any time even after your site has been created. Themes could have different features. Each theme usually allows varying degrees of customization from the Dashboard. Custom options may include color, image, background, etc. Categories and Tags Categories and tags allow you to organize your posts and enable a reader to search posts by categories and tags. You could assign different categories and tags to a post. Wordpress assigns a post the category Uncategorized by default. Posts that are properly categorized are grouped with posts of similar content so that it is easier to navigate through the posts. A tag is used as a keyword which describes all or part of a post. Links to all the categories and tags to which a post belong are displayed under the post on the blog page. 5

7 Site Components Example of a site showing a page with the latest posts (blog page) Site Title Header Header Image Menu Right Sidebar Background Image Category Shows number of comments on the post and links to comments 6

8 Example of a site showing a sample static page This page has no sidebars and has the Allow Comments enabled so that visitors to the site are allowed to leave comments. 7

9 Logging In To create or manage your website, you have to first login: 1. From a browser window, enter The following screen is displayed. 2. Click Login. 3. Enter Username and Password. Use your FCPS address and password. You will be logged in and a screen similar to the following will be displayed. 8

10 Requesting an FCPS Site/Blog 1. Login from 2. Click on My Sites. 3. Click on Create a New Site. 9

11 4. Enter Site Name and Site Title. The Site Name will be used in the address of your site e.g. If your site name is jsmith, the URL of your site will be 5. Click Create Site. Before you can see your Site when you login, the Site has to be activated by the FCPS Wordpress Administrator. You will get a notification after your Site has been activated. 10

12 Choosing a Theme The theme determines the way that the site is displayed. You can change the look and feel of your site by changing the theme. The theme can be changed at any time even after your site has been created. To view your current theme or to change the theme: 1. Go to the Dashboard. 2. From the Dashboard, click on My Sites. 3. Click on Dashboard for the Site you want to manage (Skip this step if you only have one Site. You will automatically be on the Site). 11

13 4. Hover your mouse over Appearance and click on the little arrow that appears on the side. A list of options will appear under Appearance. 5. Click on Appearance -> Themes. 12

14 6. Scroll through the pages to see what themes are available. 7. If you know the name of the theme you are looking for, enter it in the Search Installed Themes textbox, and click the Search Installed Themes button to bring up the theme. 8. To change the current theme, click on Activate under the overview of the theme. To see what the Site looks like, click on Visit Site from the top Menu Bar. To return to the Dashboard, click on Dashboard from the top Menu Bar. 13

15 Working with the Twenty Eleven Theme This section describes how to customize some of the options in the Twenty Eleven theme. The Twenty Eleven theme is versatile and fairly easy to customize. You could change the look of your page by simply changing the Header Image and Background. Setting a Custom Header 1. Go to the Dashboard. 2. Click on Appearance -> Header. 3. Click on Browse 4. From the pop-up window, select the image file to upload from your computer and click Open. The location of the file will be copied to the textbox on your Dashboard. 5. From the Dashboard, click Upload. Note that the header image size is 1000 by 288 pixels. Any image uploaded of that size will be used as is. Otherwise, the next screen displayed will allow you to crop the image to the right size. 14

16 6. Click on the Crop Box and drag it to the area of the image you would like to use as the Header. 15

17 7. Click on Crop and Publish. To see what the Site looks like, click on Visit your site. 16

18 To return to the Dashboard, click on Dashboard from the top Menu Bar. 17

19 Setting a Custom Background 1. Go to the Dashboard. 2. From the Dashboard, click on Appearance -> Background. 3. To select a color for the Background, click on Select a Color and click on the color on the color chart to select it. 4. To select an image for the Background: a. Click on Browse b. From the pop-up window, select the image file to upload from your computer and click on Open. The location of the file will be copied to textbox on the Dashboard. c. From the Dashboard, click on Upload. It is common to use an image that forms a pattern when it is repeated. The following image is used in this example. 18

20 In this example, the Preview box shows a pattern made up of the image uploaded. This is achieved by selecting Tile for the Repeat Display option. Try different Display Options until the Preview box shows the background that you want. 5. Select the Display Options and click Save Changes To see what the Site looks like, click on Visit your site To return to the Dashboard, click on Dashboard from the top Menu Bar. 19

21 Setting Theme Options Besides the header image and background image, Theme Options provide customization features that could change the look of a website quite dramatically. To edit Theme Options: 1. Go to the Dashboard. 2. Click on Appearance -> Theme Options. 3. Select the Color Scheme, Link Color and Default Layout. Notes on Default Layout: 1. If the One-column, no sidebar option is selected, all the pages are displayed with no sidebars, including static pages using the Sidebar Template. 2. If the Content on left or Content on right option is selected, the layout applies to the blog page and all pages using the Sidebar Template. Static pages using the Default Template will still display with no sidebar. For details on page templates, please refer to the section on Using Page Templates. 20

22 Working With Pages Every new site is automatically created with a Sample Page. To view all the pages on your site: 1. Go to the Dashboard. 2. From the Dashboard, click on Pages -> All Pages. 21

23 Adding a Page 1. Go to the Dashboard. 2. From the Dashboard, click on Pages -> Add New. 3. Enter the page title and text for the page. Note the Format Editor bar with options similar to Microsoft Word to use for editing text. The Show/Hide Kitchen Sink option is used to show/hide additional formatting options. When copying text from another source, use Paste as Plain Text to avoid formatting issues. 4. Click on Save Draft to save changes. 5. Click on Preview to see what the page looks like. 22

24 6. Close the preview window. 7. To make the page visible on your site, click on Publish to publish the page. You could schedule the page to be published at a future time or backdate the publish date of the page. To do so: a. Click on Edit next to the words "Publish immediately". b. Change the settings to the desired time and date. c. Click on Publish. 23

25 Editing a Page 1. Go to the Dashboard. 2. From the Dashboard, click on Pages -> All Pages. 3. Hover your mouse over the page to be edited and the following options appear under the page title: Edit to edit the contents of your page and other page options Quick Edit to edit select page options Trash to delete the page View to view the page 4. Click on the desired action. To edit, click on Edit. 24

26 5. Edit the page and click on Update to save the changes. Using Page Templates The page template changes the way the content of a page is displayed. Each page could be assigned its own template. Page templates are theme dependent and many themes come with a few options. The Twenty Eleven theme comes with 3 different templates. 1. Default Template The Default Template displays the content in the center of the page with no sidebars. 25

27 2. Sidebar Template The Sidebar Template displays a sidebar either to the right or left of the page content. The sidebar layout is defined in Theme Options. Please refer to the section, Assigning a Page Template on how to specify the position of the sidebar. Items displayed on the sidebar can be customized through the use of Widgets. The example below shows a page using the Sidebar template with content on the left. 3. Showcase Template For details on the Showcase Template, please contact the author of this document. 26

28 Assigning a Page Template 1. Go to the Dashboard. 2. Click on Pages -> All Pages. 3. Click on Edit under the page to be edited. 4. Under Template in the Page Attributes section, select the desired template from the drop down box and click on Update If the Sidebar Template is selected, note that that the position of the sidebar is defined in Default Layout under Theme Options. For details, please refer to the section Setting Theme Options. Working with Posts Every new site is automatically created with a Sample Post. To see all the posts on your site: 1. Go to the Dashboard. 2. From the Dashboard, click on Posts -> All Posts. 27

29 Adding a Post 1. Go to the Dashboard. 2. From the Dashboard, click on Posts -> New Post. 28

30 3. Enter the post title and text for the post. Note the Format Editor bar with options similar to Microsoft Word to use for editing text. The Show/Hide Kitchen Sink option is used to show/hide additional formatting options. When copying text from another source, use Paste as Plain Text to avoid formatting issues. 4. Click on Save Draft to save changes. 5. Click on Preview to see what the post looks like. 6. Close the preview window. 7. To make the post visible on your site, click on Publish to publish the post. You could schedule the post to be published at a future time or backdate the publish date of the post. To do so: a. Click on Edit next to the words "Publish immediately". b. Change the settings to the desired time and date. c. Click on Publish. 29

31 Editing a Post 1. Go to the Dashboard. 2. From the Dashboard, click on Posts -> All Posts. 3. Hover your mouse over the post to be edited and the following options appear under the post title: Edit to edit the contents of your post and other post options Quick Edit to edit select post options Trash to delete the post View to view the post 4. Click on the desired action. To edit, click on Edit. 30

32 5. Edit the post and click on Update to save the changes. Managing Categories and Tags Categories and tags allow you to organize your posts and enable a reader to search posts by categories and tags. Wordpress assigns a post the category Uncategorized by default. So it is a good idea to assign each post you create to the appropriate category. Use tags as keywords to describe all or part of the post. This section describes how to assign categories and tags. Before you assign a category, it must first be created if it doesn t already exist. Creating a Category 1. Go to the Dashboard. 2. Click on Posts -> Categories. 3. Enter the name of the category in the Name field and click on Add New Category. 31

33 Assigning a Category 1. Go to the Dashboard. 2. Click on Posts -> All Posts. 3. Hover your mouse over the post for which you wish to assign a category and click on Quick Edit. 4. To select a category, click on the box next it. To remove a category from a post, click on the box next to the category to uncheck it. Note that multiple categories could be assigned to a post. 5. Click on Update to save the changes. 32

34 Assigning a Tag 1. Go to the Dashboard. 2. Click on Posts -> All Posts. 3. Hover your mouse over the post for which you wish to assign a category and click on Quick Edit. 4. Enter the name of the tag(s) in the Post Tags field. Multiple tags may be entered with a comma after each one. Tag names may have multiple words. 5. Click on Update to save the changes. 33

35 Adding Media Adding Images to a Page or Post Images could be included on a page or post using files on your computer or from external sources. This section describes how to add an image using an image file on your computer. 1. Go to the Dashboard. 2. To add an image to a page, click on Pages -> All Pages. To add an image to a post, click on Posts -> All Posts. 3. Hover your mouse over the title of the page/post to be edited and click on Edit. 4. Place the cursor where you want the image to be and click on the Add an Image icon. 34

36 5. Click on Select Files. 6. Click on the desired image file, and then click Open. 35

37 7. Enter the following information: Title This gets displayed when the mouse is hovered over the image on the page Alternate Text This text appears in place of the image if for some reason the image cannot be displayed Caption This text is displayed underneath the image Link URL The URL of the page that will be linked to when the user clicks on the image 8. Select Alignment option by clicking on it. 9. Select Size option by clicking on it. 10. Click on Insert into Post. 36

38 Adding Videos to a Page or Post Videos could be included on a page or post using files on your computer or from external sources. By default, the video is added as a link on the post or page. This section describes how to add a video using a video file on your computer. It will also describe how to embed a video to a post or page through the use of a plugin (add-on program). The maximum upload file size is 20MB. As a Link to the Video 1. Go to the Dashboard. 2. To add a video to a page, click on Pages -> All Pages. To add a video to a post, click on Posts -> All Posts. 3. Hover your mouse over the title of the page/post to be edited and click on Edit. 4. Place the cursor where you want the video to be and click on the Add Video icon. 5. Click on Select Files. 37

39 6. Click on the desired video file, and then click Open. 38

40 7. In the Title field, enter the text to be displayed for the link to the video. 8. Click on Insert into Post. A link to the video file will be added to the post or page. 9. Click on Update to save changes on the post or page. 39

41 As an Embedded Video A video or audio file could be embedded into a post or page by using the MediaElement.js plugin. To do so, the plugin must first be activated. If the plugin has already been activated on your site, please skip Steps Go to the Dashboard. 2. Click on Plugins 3. Scroll down to MediaElements.js and click on Activate. 4. To add a video to a page, click on Pages -> All Pages. To add a video to a post, click on Posts -> All Posts. 5. Hover your mouse over the title of the page/post to be edited and click on Edit. 40

42 6. Place the cursor where you want the video to be and click on the Add Video icon. 7. Click on Select Files. 8. Click on the desired video file, and then click Open. 41

43 9. Copy the Link URL field (Highlight and press CRTL+C). Then click on Save all changes. 10. Paste the URL to the place on the post or page where you want to insert the video (Position the cursor and press CTRL+V). 11. Add the code below (including the parentheses), replacing the URL with the one you copied: [video src=" width="640" height="360" autoplay= true ] To not autoplay, use the code below: [video src=" width="640" height="360"] The video will be embedded into the post or page. 12. Click on Update to save changes on the post or page. For more details on using the MediaElement plugin, please go to 42

44 Adding Files to the Media Library Files could be added to the Library without attaching them to any particular page or post. This section describes how to add a file from your computer. 1. Go to the Dashboard. 2. Click on Media -> Add New. 3. Click on Select Files. 4. Select the file to be uploaded and click on Open. 43

45 5. Enter the applicable information and click on Save all changes. Note that the File URL is the location of the uploaded file. 44

46 Adding Links This section describes how to attach a link to an element on your page or post so that when the user clicks on it, the link will bring the user to another page either outside or within your webpage. 1. Highlight the element to which you want to attach a link. 2. Click on the Insert/edit link (Alt+shift+A) icon. 45

47 3. To link to an external source a. Enter the URL of the page to which you want to link. b. Enter the Title (this is the text that is displayed when the mouse is hovered over the text). c. Click on Open link in a new window/tab (if you want the page to be displayed in a new window). d. Click on Add Link. 46

48 4. To link to content within the website a. Select the post or page to which you want to link by clicking on it. You could also search for the post or page by entering the text to be searched in the Search field and pressing the Enter key. The matching items will be displayed. b. The URL for the post or page will automatically be populated into the URL field. c. Click on Add Link. 47

49 Other Custom Options Making a Static Page the Home Page The Home/Front Page could either be the blog page or a static page. By default, the blog page (displaying a list of the most recent posts) is the Home Page when a site is created. This section describes how to make a static page the Home Page that a visitor to your site sees when they first get into your site. 1. Create a new blank page that will serve as the blog page. Remember the Title of the new page (e.g. News, Recent News, etc.). For details on how to create a new page, please refer to Adding a Page. 2. Go to the Dashboard. 3. Click on Settings -> Reading. 4. Click on the A static page radio button. 5. On the Front page drop down box, select the page that you want to make the Home Page. 6. On the Posts page drop down box, select the new blank page that you just created for the blog page. The listing of the most recent posts will be displayed on this page. 7. Click on Save Changes. 48

50 Customizing the Menu(s) 1. Go to the Dashboard. 2. Click on Appearance -> Menus. 3. Enter the Menu Name and click on Create Menu. 4. Select items like pages, categories or custom links from the left column. Click on Add to Menu. 5. In the right column, drag and drop the items you have selected to arrange them in the order you want. 6. Click on Save Menu. 7. To activate the new menu, select it from the Primary Menu (or other type of menu, depending on the theme) drop down box and click on Save. 49

51 Using Plugins Plugins are programs that can be added to the basic installation of Wordpress to extend the features and functionality of Wordpress e.g. contact forms, embedding video and audio files, social media buttons, etc. Several plugins have been included on the FCPS Wordpress installation. Some of these plugins have to be activated at the site level in order for them to be available. Adding a Contact Form There are several plugins that enable the addition of a contact form to a post or page. This section describes how to use the plugin called Contact Form. First, activate the plugin. Then add the contact form to a page or post. Activating the Contact Form Plugin The plugin only needs to be activated once on a site. Skip this section if you have already activated this plugin. 1. Go to the Dashboard. 2. Click on Plugins. A list of installed plugins will be displayed. 3. Click on Activate under Contact Form Plugin. 50

52 4. Click on Settings under Contact Form Plugin. 5. Select your address from the drop down box in the The user s address field. The messages from the contact form will be sent to this address. Then click on Save Changes. Additional options are available by clicking on the box next to Additional options. Adding the Contact Form to a Page 1. From the Dashboard, go to the page on which you wish to add a contact form (may be an existing page or a new Contact Page to contain just the contact form). You may also add a contact form to a post. 2. Place the cursor where you wish to insert the contact form and type in the code [contact_form] including the square brackets. Save the page or post by clicking on Update or Publish (whichever is applicable). The screen below shows what the page looks like from the example above. 51

53 3. Test submitting a message through the contact form you just created to make sure that it is working as you expect. If you are creating a special Contact Page to hold the contact form, remember to provide access to the page e.g. from the menu, link from another page or from the sidebar, etc. For details on how to add a new page to the menu, please refer to the section on Customizing the Menu(s). For details on how to link from another page, please refer to the section on Adding Links. For more information on the Contact Form plugin, please go to 52

54 Using Widgets Wordpress Widgets provide an easy way to add content and features to the sidebar, e.g. archives of posts, list of categories, custom menu, etc. Depending on the theme, there may be other widgetized areas where you could add widgets, such as a header and footers. Most themes come with default widgets on the blog page. This section describes how to customize widget areas for themes that have active widget areas. 1. Go to the Dashboard. 2. Click on Appearance -> Widgets. 3. The right column shows the different widget areas that the theme allows. As shown above, the Twenty Eleven theme has a main sidebar and three footers. The left column shows the available widgets. To select a widget, click on it and drag it to the area where you wish it to display. 4. To arrange the widgets in a widget area, click and drag it into place. 53

55 5. To configure a widget, click the arrow in the upper right corner to expand the widget's options (if available). 6. Click on Save to save the customization. 7. To remove a widget from a widget area, click on it and drag it back to the left column. If you wish to save custom settings for the widget, drag it to the Inactive Widgets area at the bottom of the left column. The settings will be saved if you choose to use the widget later. Note that if you change themes, you may need to customize your widgets again. For details on the various widgets and configuration options, please go to Embedding a Twitter Feed A Twitter Feed widget could be added to your Wordpress site by creating a twitter feed widget in Twitter, and then adding the code from the widget to the Wordpress site. Creating a Twitter Feed Widget in Twitter 1. Login to your Twitter account 2. Click on Settings 54

56 3. Click on Widgets 4. Click on Create New 55

57 5. Enter and edit the info for the twitter feed widget you wish to create. The username does not have to be you but could be anybody whose tweets you want to feed to your site. Then click Create widget. 56

58 6. Copy the code generated. This HTML code will be used in the section Adding the Twitter Widget to Wordpress below. Click on Save changes if you wish to save the widget. Adding the Twitter Widget to Wordpress 1. Login to Wordpress and go to the Dashboard of the site. 2. Click on Widgets 3. Click on the Text widget and drag it to the sidebar where you wish to insert the twitter feed. 57

59 4. Enter the title text and paste the code created by the twitter feed widget created in Twitter (Step 6 of the section on Creating a Twitter Feed Widget in Twitter). Click on Save. 5. Visit the site to verify that the twitter feed has been added. 58

60 Working with Comments With Wordpress, visitors to your site could leave comments on your posts or pages. You have the option of whether to allow comments on any of your posts or pages. This section describes how to allow or disallow comments and how to manage comments Allowing /Disallowing Comments in Pages/Posts 1. Go to the Dashboard. 2. Click on Pages -> All Pages or Posts -> All Posts. 59

61 3. Click on the dot to allow or disallow comments for the particular page or post. The dot toggles between green and red when you click on it. Red means the page or post is closed for comments. Green means the page or post is open for comments. 4. Click on Apply to apply the changes. Managing Comments By default, your site is set up so that comments must be approved by you before they appear on your site. You will also receive an when someone enters a comment. You could approve, unapprove, reply to, edit, mark as Spam or delete any comment that has been entered. 1. Go to the Dashboard. 2. Click on Comments for a list of comments on your site. 3. Hover your mouse under the comment for a list of actions that you could take. Click on the desired action. 4. Click on Apply to apply the changes. Good Housekeeping 1. Remember to delete the Sample Page and Sample Post that were created automatically with your new website. 2. Most themes come with default widgets in the sidebar of the blog page. Remove the widgets that may be irrelevant or confusing to the reader. For details on how to customize widgets, please refer to the section Using Widgets. 60

62 3. When you are ready for your website to be linked from your school s website, please provide the website link to your webmaster. The link is the URL at the top of your Home Page. It will be in the format where sitename is the site name that you entered when creating the site. 61

63 Appendix A - Themes with Sliders A slider uses a slideshow format to display a series of images on the web page (usually the Home Page). This section describes and compares 3 themes with sliders - Catch Box, Max Magazine, and zeemagazine. In all 3 themes, the slider is optional and could be enabled or disabled by the site administrator at any time. 62

64 Catch Box, Max Magazine and zeemagazine Comparison Theme Max Magazine zeemagazine Catch Box Number of Menus 1 primary navigation 2 3 menu Top Primary Main Secondary just below Primary Footer Slider (optional) 1 slider, 1 carousel 1 slider 1 slider (specify by Select category to Select category to Post ID, up to 4) display, default is display, default is Slider effect options latest posts latest posts Featured image Featured image works Slider effect options should be at least best if it is about 600 px wide otherwise image could get stretched or squished Featured image is cropped to square shape 600 px wide to look good. Social media Add as widgets (displayed at the bottom) Theme option (Social Media Buttons), displayed at the top Footer 4 sub areas 4 sub areas Option to add footer text below the footer widgets area Header Logo Theme option - Theme option - Specify image URL in Specify image URL Homepage Settings in Theme Layout (links to Home Page) (links to Home Variable size allowed Page) - About 230 x 100 px Variable size Header Ad (top right corner) looks good Theme option ( Ads and Custom Styles) -html code allowed. Theme option (468x60 Header Ad Spot) Theme option, displayed at bottom 3 Upload image file - Image is cropped to 300 x 125 px (links to Home Page) Can display random image from a set of images N/A Header Banner N/A Upload custom header banner. Image is cropped to 950 x 150 px Background Other Color - specify in Ads and Custom Styles (html code) Can specify posts of different categories to display on Home Page Select color or upload image N/A Select color or upload image Custom Ad (image and URL link) can be added as widgets 63

65 Catch Box Layout Header Logo Site Title Primary Menu Secondary Menu Footer Area 1 Slider Footer Area 3 Footer Menu 3 Footer Areas. In this example, Footer Areas 1 and 3 are used for Catch Box Adspace Widgets to provide links to the District and School websites 64

66 Max Magazine Layout Header Logo Header Ad Primary Menu Slider Footer widget #1 Footer widget #2 Footer widget #3 Footer widget #4 Footer area (allows 4 widgets 4 columns). In this example: Text widget on the left to provide link to District website Max: Social Links widget on the right for social media links 65

67 Other Optional Features: Carousel Featured Categories With Carousel enabled posts of specified category rotate underneath the slider. With Featured Categories (up to 4) enabled posts of specified categories are displayed under the Category heading. Latest posts are displayed under the carousel (if enabled) and featured categories (if enabled). Otherwise, they aredisplayed directly under the slider. 66

68 zeemagazine Layout Top Menu Header Ad Header Logo Main Menu Header Image Slider Footer widget #1 Footer widget #2 Footer widget #3 Footer widget #4 Footer content (text) Footer area (allows 4 widgets 4 columns). In this example, widgets 1 and 4 are used to provide links to the District and School websites. 67

69 Setting Catch Box Theme Options Theme Options From the Dashboard, select Appearance -> Theme Options. 68

70 Featured Slider Slider Options From the Dashboard, select Appearance -> Featured Slider -> Slider Options. Enter the Post IDs of the posts to be included in the slider. To get the Post IDs, go to the Dashboard and select Posts -> All Posts. 69

71 Featured Slider Slider Effect Options From the Dashboard, select Appearance -> Featured Slider -> Slider Effect Options. This panel allows you to specify the transition effects of the images on the slider. Social Links From the Dashboard, select Appearance -> Social Links. 70

72 Header Logo From the Dashboard, select Appearance -> Header. To select the image to be used as the header logo, click on Browse to select and upload the image file that is accessible on your computer. Multiple images could be uploaded and used to show a random image on each page. Header image is 300 x 125 pixels. To change the color of the Site Title, click on Select a Color. 71

73 Custom Background From the Dashboard, select Appearance -> Background. The background could either be a color or an image. To use an image, click on Browse to select and upload the image file that is accessible on your computer. To use a color, click on Select a Color. Tips 1. Posts added to the slider should have a featured image about 600 px wide. 2. Featured image does not show up on post displayed on homepage unless there is text in the post. 3. Featured image is displayed in slider and home page but not on the post itself. For an image to be in the post itself, it has to be inserted into the post. 72

74 Setting Max Magazine Theme Options Homepage Settings From the Dashboard, select Appearance -> Theme Options -> Homepage Settings. Logo URL - To use an image, first add it to the media library. Then copy the URL of the image and paste here. 73

75 Ads and Custom Styles (Header Add and Background Color) From the Dashboard, select Appearance -> Theme Options -> Ads and Custom Styles. To insert a Header Ad, enter the HTML code as shown below in the Header ad code box: <a href= src= Replace with the URL of the site to link to. Replace with the URL of the image file. Before an image can be used, it has to first be added to the media library. Then copy over the URL of the image file here. To change the background color, enter the HTML code as shown below in CSS styles box: body { background: #990000; } Replace with the Hex color code of the color you wish to use. is a website that provides the capability to convert a color to Hex code. Tips Featured posts must have featured image if using slider. Otherwise, it will not display properly. Images could get stretched or squished. 74

76 Setting zeemagazine Theme Options Theme Layout From the Dashboard, select Appearance -> zeemagazine Options. Logo To use an image, first add it to the media library. Then copy the URL of the image and paste here. Footer Content Enter text to be displayed at the left bottom corner of the website. Custom Color Select the color of the menu, link text, and bottom footer. Click OK to save selection. 75

77 Featured Post Slider From the Dashboard, select Appearance -> zeemagazine Options. Social Media Buttons From the Dashboard, select Appearance -> zeemagazine Options. 76

78 468x60 Header Ad Spot From the Dashboard, select Appearance -> zeemagazine Options. Ad Spot Image URL To use an image, first add it to the media library. Then copy the URL of the image and paste here. Custom Header Banner From the Dashboard, select Appearance -> Header. 77

79 Custom Background From the Dashboard, select Appearance -> Background. The background could either be a color or an image. To use an image, click on Browse to select the image file that is accessible on your computer. To use a color, click on Select a Color. Widgets The following HTML code could be used in a Text Widget to add a link to the District website: <p style="text-align: left;"><a title="fcps District Website" href=" County Public Schools</a></p> Substitute the text as appropriate to link to different websites. 78