If you believe, belong. Website Administration Guide

Transcription

1 If you believe, belong. Website Administration Guide

2 Table of Content // ASA Wordpress Administration Guide Table of Content Site Related Information and Guides... 3 Site Breakdown... 4 Image and Color Specifications... 6 Menu Structure... 7 Custom Menu Visual editor Posts (News Releases) Pages Links Media (images) Video Podcasts Arconix Shortcodes AdRotate

3 ASA Wordpress Administration Guide Additional Site Related Information and Guides Tentative Production URLs Website: Adminstrative Dashboard: URLs when site becomes LIVE Website: Administrative Dashboard: Plugin Usage Guides and Knowledgebase Wufoo IWorld Maps (Tentative URL) Slider Pro Ad Rotate 3

4 Section 1 // ASA Wordpress Administration Guide Site Breakdown HOMEPAGE UTILITY MENU MAIN MENU SLIDER PRO PAGE: HOMEPAGE CUSTOMIZABLE WIDGET WIDGETS POSTS AD ROTATE 4

5 Section 1 // ASA Wordpress Administration Guide Site Breakdown INTERIOR PAGES PAGE: CONTENT PAGE: TITLE 5

6 Section 2 // ASA Wordpress Administration Guide Image & Color Specifications Image Sizes 1. Slider Pro on Homepage Width: 700px 2. Content Area Images Maximum Width: 680px 3. Issues Header Images Width: 680px x125 Ads Width: 125px x240 Ads Width: 136px 6. Newsletter Ad Width: 585px 7. Page/Post Ads Width: 680px Maximum width: 680px Height: 300px Height: Variable Height: 200px Height: 125px Height: 240px Height: 100px Height: 100px Height: Variable Color Specifications ASA Green # ASA Yellow #fbaa29 6

7 Section 3 // ASA Wordpress Administration Guide Site/Main Menu Structure Belong Drop down menu as seen on website Menu structure in Dashboard > Appearance > Menus 7

8 Section 3 // ASA Wordpress Administration Guide Site/Main Menu Structure Learn drop down menu as seen on website Menu structure in Dashboard > Appearance > Menus 8

9 Section 3 // ASA Wordpress Administration Guide Site/Main Menu Structure Award Programs drop down menu as seen on website Menu structure in Dashboard > Appearance > Menus 9

10 Section 3 // ASA Wordpress Administration Guide Site/Main Menu Structure News & Media drop down menu as seen on website Menu structure in Dashboard > Appearance > Menus POSTS PODCASTS PODCASTS EXTERNAL LINK 10

11 Section 3 // ASA Wordpress Administration Guide Site/Main Menu Structure International Programs drop down menu as seen on website Menu structure in Dashboard > Appearance > Menus 11

12 Section 3 // ASA Wordpress Administration Guide Site/Main Menu Structure About ASA drop down menu as seen on website Menu structure in Dashboard > Appearance > Menus 12

13 Section 12 // ASA Wordpress Administration Guide Custom Menu - User Guide Adding Items to a Menu The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default. 1. Locate the pane entitled Pages. 2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site. 3. Select the Pages that you want to add by clicking the checkbox next to each Page s title. 4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step. 5. Scroll back to the Menu Editor. 6. Click the Save Menu button. Your custom menu has now been saved. Deleting a Menu Item 1. Locate the menu item that you want to remove in the menu editor window 2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it. 3. Click on the Remove link. The menu item/box will be immediately removed. 4. Click the Save Menu button to save your changes. Customising Menu Items The Navigation Label This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog. The Title Attribute This field specifies the Alternative ( Alt ) text for the menu item. This text will be displayed when a user s mouse hovers over a menu item. 1. Click on the arrow in the top right-hand corner of the menu item to expand it. 2. Enter the values for the Navigation Label and Title Attribute that you want to assign to the item. 3. Click the Save Menu button to save your changes. 13

14 Section 12 // ASA Wordpress Administration Guide Custom Menu - User Guide Creating Multi-level Menus When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right. The WordPress menu editor allows you to create multi-level menus using a simple drag and drop interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu. To make one menu item a subordinate of another, you need to position the child underneath its parent and then drag it slightly to the right. 1. Position the mouse over the child menu item. 2. Whilst holding the left mouse button, drag it to the right. 3. Release the mouse button. 4. Repeat these steps for each sub-menu item. 5. Click the Save Menu button in the Menu Editor to save your changes. 14

15 Section 4 // ASA Wordpress Administration Guide The Visual Editor The visual editor provides a semi-wysiwyg (What You See is What You Get) content editor that allows you to easily create, edit, and format your blog content in a view similar to that of a word processor. This is the default editing mode of WordPress, but if it does not appear to be enabled, you can select the Visual tab in the top right corner of the editor area, as depicted below. There are two (2) rows of editing icons contained within the visual editor. You can find out what any icon means or does by hovering over it with your mouse a small tooltip will appear describing the icon and its purpose. Row 1 When initially opened, the visual editor will display a single row of icons: Bold 2. Italic 3. Strike-through 4. Unordered list (bullet points): * Item 1 * Item 2 5. Ordered list 1. Item 1 2. Item 2 6. Blockquote (a way of displaying quoted text) 7. Align Left 8. Align Center 9. Align Right 10. Insert/edit link 11. Unlink 12. Insert More tag 13. Toggle spellchecker (only English at the moment, sorry!) 14. Toggle fullscreen mode 15. Show/Hide Kitchen sink (enables the second row of editing icons) 16. Insert Image slider 15

16 Section 4 // ASA Wordpress Administration Guide The Visual Editor Visual Editor - Row 2 To display the second row of icons, select the kitchen sink icon Style various formatting styles defined by your theme 2. Underline 3. Align full 4. Select text color change the text color 5. Paste as Plain Text 6. Paste from Word 7. Remove formatting 8. Insert custom character 9. Outdent move text further left 10. Indent move text further right 11. Undo undo your last action 12. Redo redo your last action 13. Help display some information about using the editor, as well as keyboard shortcuts. Alignment Both text and images can be aligned using the appropriate icons: Left Right Center Full Note that full alignment can only be applied to text and will align both sides of the text. 16

17 Section 4 // ASA Wordpress Administration Guide The Visual Editor Styles The style drop-down menu allows you to change the formatting of any selected text. This includes various headings and other pre-defined styles built into your theme. Note that further style modification requires the Custom CSS Upgrade (and appropriate knowledge of CSS). Text Color To change text color you must first highlight a section of text: Clicking on the down arrow next to the text color button will display a color selector: Selecting a color will apply that color to the selected text and make it the default color for the color button. Clicking on the text color button itself will apply the last default color. Pasting Text If you copy and paste text from somewhere else, you may discover that it does not always appear exactly as you would expect. If you use the Paste as text button then a special cleanup process will run to remove any special formatting and HTML tags that may otherwise change your text. Once clicked, a window appears where you can enter your text: Checking the keep linebreaks box will preserve all HTML <br /> tags. Unchecking this option will remove them. 17

18 Section 4 // ASA Wordpress Administration Guide The Visual Editor Remove Formatting The remove formatting button, as you would expect, removes all formatting (bold, italic, colors etc) from a highlighted section of text. First select your text: When the button is clicked, all the formatting will be removed: Custom Characters As well as the normal letters available directly from your keyboard, you can also insert special characters. Position your cursor to where you want to insert a character and click on the insert custom character button. A popup window will appear: Click any character and it will be inserted at your cursor position. Outdent / Indent The indent button will move text in by one level, and the outdent button will take away one level. 18

19 Section 4 // ASA Wordpress Administration Guide The Visual Editor Tables Create a table using the Insert Table tool button 2. Modify and set properties for table rows 3. Modify and set properties for table cells 4. Insert a row above selected row 5. Insert row below selected row 6. Delete selected row from table 7. Insert column before selected column 8. Insert column after selected column 9. Delete selected column 10. Split merged cells 11. Merge selected table cells The Basics Insert Table Clicking the Insert Table button to open the pop-up window to configure the basic table. The essential values are the number of columns and rows. The other properties are optional these can be changed later if required. Padding: Adds blank space around the edges of the cells essentially used to space the content of cells from other cells. Cell Spacing: Adds space between cells (Note: padding and spacing values are usually pixels) Border: Adds a border around the table enter a pixel value. Class: This is an HTML value that can be selected from a drop down menu, and is dependent on the classes available in the theme. 19

20 Section 4 // ASA Wordpress Administration Guide The Visual Editor ADVANCED ID: An HTML element tag Summary: Description of the content in the table can help search engines to index the content. Style: CSS styling. For an example the background color and border color as well as a 3 pixel border have been set. Language Code: Identify the language used. (Link to Iist of International UNICODE Internet language codes) en is for English (generic or US English). Background image: The full path to an image to use for a table background (An absolute URL including is used). Frame: Sets frame properties. Rules: Select where to apply rules groups, rows, columns, all or none. Language Direction: Left to right or right to left this only needs to be set if a right to left language is chosen. Border Color: Set a color for the table border - the sample uses a blue border. Background Color: Sets a background color for the table. (N.B. The picker does not work if using Firefox as a browser when editing content the other 2 options Palette and Named do however. 20

21 Section 4 // ASA Wordpress Administration Guide The Visual Editor Table Row Properties General: Row Type: Select header, body or footer. Alignment: Sets horizontal alignment of content in row. Vertical Alignment: Choose from top, middle or bottom. Class: HTML element class. ADVANCED: ID: is another HTML element tag. Style: adds CSS style. Language Direction: Left to right or right to left this only needs to be set if a right to left language is chosen. Language Code: Identify the language used. Background image: The full path to an image to use for a ROW background Background Color: Sets a background color for the table ROW. A choice is possible to select which rows to apply the settings to. 21

22 Section 4 // ASA Wordpress Administration Guide The Visual Editor Table Cell Properties General: Alignment: Set horizontal alignment of content in cell. Vertical Alignment: Choose from top, middle or bottom. Width: Set a fixed cell width (pixels). Class: HTML element class. Cell Type: Select cell content type Data or Header Scope: Choose from Column, Row, Row Group or Column Group. Height: Set fixed cell height (pixels). ADVANCED: The setting options are the same as for Row Properties so are not repeated here. Other Functions: The remaining button functions to insert and delete rows and columns, and to split or merge cells are self-explanatory and should be familiar to any who has used tables in MS Word or an Excel spreadsheet. 22

23 Section 5 // ASA Wordpress Administration Guide Posts - Content for News Articles You login to your admin panel, and in the navigation menu on the left, click on Posts, and then Add New. WordPress displays the Add New Post SubPanel. Edit Posts Via the Posts Edit SubPanel you can select the Post or Posts you wish to edit, delete, or view. Multiple Posts can be selected for deletion and for editing. A powerful bulk edit feature allows you to change certains fields, en masse, for a group of Posts. A handy in-line edit tool, called Quick Edit, allows you to update many fields for an individual Post. Various search and filtering options allow you to find the Posts you want to edit or delete. Add New Post The most important part of WordPress, the Posts Add New SubPanel is where you write new Posts. While you are writing those Posts, you can also create new Categories, new Tags, and new Custom Fields. In addition, any Media (pictures, video, recordings, files) can be uploaded and inserted into the Posts. Tags Tags are the keywords you might assign to each post. Not to be confused with Categories, Tags have no hierarchy, meaning there s no relationship from one Tag to another. But like Categories, Tags provide another means to aid your readers in accessing information on your blog. Categories - News Categories Every Post in WordPress is filed under one or more Categories. Categories allow the classification of your Posts into groups and subgroups, thereby aiding viewers in the navigation and use of your site. When writing a post/article, remember to assign your article a category. 23

24 Section 6 // ASA Wordpress Administration Guide Pages - Static Content A Page is another tool to add content to a website and is often used to present static information about the site; Pages are typically timeless in nature. A good example of a Page is the information contained in About or Contact Pages. A Page should not be confused with the time-oriented objects called Posts, nor should a WordPress Page be confused with the word page referring to any web page or HTML document on the Web. Because Pages live outside of the normal blog chronology, and as such, are not displayed with the rest of your Posts, but are displayed individually. Edit Pages The Pages Edit SubPanel provides the necessary tools to edit, delete, and view existing Pages. On this SubPanel you can select the Page to edit or delete. Multiple Pages can be selected for deletion and for editing. As with Posts, a powerful bulk edit tool allows certain fields to be edited for a whole group of Pages. A handy in-line edit tool, called Quick Edit, allows you to update many fields for an individual Page. Various search and filtering options allow you to find the Pages you want to edit or delete. Add New Page The Add New Page SubPanel allows you to create new Pages. 24

25 Section 7 // ASA Wordpress Administration Guide Links - How to Add Hyperlinks 1. Select the text that you want to add the link to. 2. Select the chain link icon. (there is a closed chain link and one that looks broken, select the closed one) Add the URL link to the URL field into the pop-up box, add your title unless the text that you selected is what you want. 4. You will notice a check box option that says open link in new window or tab check this option IF you are linking to outside content or sites. 5. You will notice that the pop up box has an additional section that reads or link to existing content. This allows you to easily create a link within a page to another page that you have already created. 6. Then hit add link. 7. If you want to delete the link highlight the text and select the broken chain link icon in the kitchen sink

26 Section 8 // ASA Wordpress Administration Guide Media - Add images to your posts or pages When creating or editing a WordPress page or blog post, you can easily add images at any time using the WordPress Media Uploader tool. Here s how to add an image, step-by-step, using the media uploader: Step 1 Placing your cursor In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead. Tip: It s a good idea to place your cursor on the left margin of your text, even if you want the image to appear on the right. That s because there is a special setting called Alignment that allows you to control whether the image appears on the right or the left side of the text. It even controls how text flows around the image automatically. Step 2 Click the Add Media button Once you ve placed your cursor on the line where you want your image to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media option from the list of actions in the left side of the media uploader window. 26

27 Section 8 // ASA Wordpress Administration Guide Media - Add images to your posts or pages Step 3 Add or Select Your Image You can add or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window: Upload Files: Upload the image you want to use from your computer by dragging it into the upload area. Media Library: Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post. Once you have selected or uploaded the image you want to add, You will see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane on the right hand side of the media uploader interface. 27

28 Section 8 // ASA Wordpress Administration Guide Media - Add images to your posts or pages Step 4 Attachment Details The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels. There are also action links that allow you to Edit Image, which takes you to the Edit Image page, or to Delete Permanently to remove the image from your site. In addition, you can edit the following media information: Title: The title of this media. Caption: The caption for this image. The text you enter here will be displayed below the image. Alternate Text: Enter the Alt text for the image, e.g. The Mona Lisa to describe the media. Description: A description for this particular media. For more information on these media settings, see the Edit Media page. Step 5 Attachment Display Settings The Attachment Display Settings pane controls how the image is displayed when viewed on the site. You have options to set how you would like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image will be, In addition you can set what size image you would like to display on your page. 28

29 Section 8 // ASA Wordpress Administration Guide Media - Add images to your posts or pages Image Alignment The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from: Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right. Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left. Center: Aligns the image to the center of the page, with no text displayed around it. None: Inserts the image in to the page with no alignment Top row: Left and Right alignments. Bottom row: Center and None alignments 29

30 Section 8 // ASA Wordpress Administration Guide Media - Add images to your posts or pages Image Link The Link To settings determine the URL/web address to which the image will be linked when clicked on by a visitor to your site. You can specify the following image link settings: Attachment Page: Links your inserted image to its WordPress media attachment page. Media File: Links your inserted image directly to the original, full-size version of the file. Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked. None: This setting will remove the link completely, rendering the image un-clickable. Image Size The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from: Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur. Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side. Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed. Thumbnail, Medium, and Large image sizes (Image Alignment: Left) 30

31 Section 8 // ASA Wordpress Administration Guide Media - Add images to your posts or pages You can visit the Settings>Media section of your WordPress dashboard to customize the above image sizes. Step 5 Inserting the image Once you have determined your image settings, click on the blue Insert into post or Insert into page button, to add the image to your page or post. After the image uploader window closes, you will see the image in the text editor window, including a preview of the alignment of the image, if you have specified an image alignment. At any time, you can edit the image settings by clicking on the Edit Image button in the upper left hand corner. You can remove the image from your page/post by clicking on the Remove Image button. 31

32 Section 9 // ASA Wordpress Administration Guide Videos - Embedding YouTube Videos 1. Add/Edit a Page or Post. 2. Enter title of page or post as needed. 3. Enter content via Visual Editor as needed. 4. Click the Text tab to switch from Visual Editor to Text mode 5. Access youtube video via youtube.com. 6. Click the Share tab. 7. Click the Embed tab. 8. Change the video size in the drop down menu to 560 x Highlight and copy (Ctrl-C) all of the html code provided (from <iframe>... to... </iframe> 10. Paste code as is into the the Visual editor in Text mode (Refer to step 4). 11. Click Publish or Update. 32

33 Section 9 // ASA Wordpress Administration Guide Videos - Embedding YouTube Videos

34 Section 10 // ASA Wordpress Administration Guide Podcasts - How to Add Audio Files 1. Navigate to the Podcasts tab and click Add New. 2. Enter a descriptive title. 3. Enter a long description in the Visual Editor. 4. Assign post to a Podcast Category (((IMPORTANT!!!))) 5. Upload media file via the Add Media button. 6. Highlight and Copy URL of uploaded file from the Attachement Display Settings. 7. Paste copied URL into the Visual Editor. 8. Click Publish. NOTE: Audio files may be added the same way to any page or post within the website. Simply skip assigning a podcast category. 34

35 Section 10 // ASA Wordpress Administration Guide Podcasts - How to Add Audio Files

36 Section 11 // ASA Wordpress Administration Guide Arconix Shortcodes OVERVIEW Arconix Shortcodes provides a number of useful design elements like buttons, boxes, tabs and toggles to add to the user-friendliness of the website. BOXES Boxes gives you an easy and visually appealing way to present chunks of content anywhere on your website. Box may contain optional title, optional custom icon and main content area with text. Example of boxes as used on the website. 36

37 Section 11 // ASA Wordpress Administration Guide Arconix Shortcodes BOX OPTIONS USAGE [box]enter box content[/box] Attributes style = blue, green, *grey, red, tan, yellow, alert, comment, download, info, tip Example [box style="info"]enter box content[/box] 37

38 Section 11 // ASA Wordpress Administration Guide Arconix Shortcodes buttons Example of buttons as used on the website. BUTTON OPTIONS USAGE [button url=" Text[/button] Attributes size = small, *medium, large color = black, blue, green, grey, orange, pink, red, *white url = enter the address the button should point to target = self*, blank rel = enter a relation for the link (if any) Example [button size="medium" color="green" url=" 38

39 Section 11 // ASA Wordpress Administration Guide Arconix Shortcodes TABS Tabs are beautiful way to organize content within limited space. Example of tabs as used on the website. USAGE Each individual tab is coded as such: [tab title="tab Title"]Tab Content[/tab] Attributes title = Name of the Tab Example [tabs] [tab title="tab 1"]Tab 1 Content[/tab] [tab title="tab 2"]Tab 2 Content[/tab] [tab title="tab 3"]Tab 3 Content[/tab] [/tabs] 39

40 Section 11 // ASA Wordpress Administration Guide Arconix Shortcodes TOGGLES Create your own toggle to hold hidden information which you can toggle to view. Example of toggles as used on the website. USAGE Each individual toggle is coded as such: [toggle title="toggle This"]Toggle Content to show on click[/toggle] Attributes title - Name the toggle css - add your own custom class Example [toggle title="click here now!"]toggle content on click[/toggle] 40

41 Section 11 // ASA Wordpress Administration Guide Arconix Shortcodes ACCORDIONS Accordions are a great way to add more information to your site without adding to the clutter. Example of Accordions USAGE The accordions group is wrapped as such: [accordions] [/accordions] ACCORDIONS Attributes type - which direction the accordions operate in - *vertical load - which accordion is active on page load - 0 (all accordions load closed), *1, 2, 3, 4, 5 css - custom css class Then each individual accordion is coded. [accordion title= Accordion Title ]Accordion Content[/accordion] Accordion Attributes title - Name of the Accordion last - For CSS styling. The value of the attribute must be anything but blank to be valid (i.e. last= y and last= 1234 have the same result) Example [accordions] [accordion title= Accordion 1 ] Accordion 1 Content here [/accordion] [accordion title= Accordion 2 ] Accordion 2 Content here [/accordion] [accordion title= Accordion 3 last= last ] Accordion 3 Content here [/accordion] [/accordions] 41

42 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin The instructions posted were gleaned from the Ad Rotate Plugin website. For support and more information about how to use this plugin, please refer to adrotateplugin.com Advertisements: Design your ads Ads are the core function in AdRotate. Creating ads is simple. Every ad has many options available to make the most of your ad campaign. Adcode Every advert will have a bit of HTML and sometimes CSS/Javascript. This represents the actual advertisement. Include the ad in your website You can include the advert on your ad in various ways. You can use the provided shortcode or PHP snippet. You can use the widget and you can have AdRotate inject ads into posts or pages automatically without editing files or pages (More on this in group management). Statistics Every advert has some statistics. Depending on if you enable click tracking this can be available. 42

43 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin GROUPS: Master your groups Groups are useful if you use multiple locations or pages for ads showing different categories/niches or sizes of ads. Most people will want to set up a group for each location. Or perhaps even several groups. Include the group in your website You ll find that as soon as you create or edit a group you can see the shortcode or php tag to add this group to your website. The shortcode can also be found in the manage groups dashboard. Place this code where you want the group to show it s ads. Inject adverts in posts or pages without using code Alternatively you can use the Post injection feature. This includes the group in categories posts and or pages of your choosing. If you use this feature, however, you do not need to use the shortcodes or php code in the assigned categories or pages for the adverts to show up. AdRotate makes it easy on you and uses a WordPress feature to add the adverts automatically. 43

44 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin BLOCKS: What is a block Groups can be assigned to so-called blocks. This refers to a block of ads. You probably saw them often. Small ads in a sidebar somewhere. This is what blocks is for. Except you can decide the size, amount of ads to show at once and how many ads there are in the first place. Create a block Each block has a name as reference. Similar to spreadsheets you need to define how many columns and rows the block will have. You can specify borders, margins and padding for the block but also for each individual advert. When you are defining the size of the advert make sure you include the adverts padding and/or margin in the size. For example: If you want a 2 2 block of ads but each ad has a margin of 10 px. You need to add 20 px to the size of 125px (beause the margin is all around, add 10 px to the top, right, bottom and left side of the ad. So suddenly your ad is px in pixels. As depicted below. This is important because AdRotate needs an exact count of the sizes to make a working grid of ads. Of course many options and combinations are possible. Just keep in mind that margins and padding and sometimes even borders take space too and make the advert larger. 44

45 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin Include the ad in your website Similar to ads and groups you use the supplied shortcode or PHP code to include the block anywhere in your theme. As well as the widget. Customize the blocks Yes you can. Starting with AdRotate you can apply your own CSS to blocks. Each block now has it s own CSS classes in the shape of b-(int) and a-(int). In the header of your site you can find the CSS classes. Example:.b-1 { float:none;overflow:auto;margin:0;padding:1px;clear:none; width:auto;height:auto; }.a-1 { margin:1px;clear:none;float:left;width:75px;height:75px; border:1px #8983d8 solid; } Note that b-1 and a-1 classes are for the block with ID 1. Block ID 2 will have a class b-2 and a-2 and so on. This allows for very specific customization. If you want a global change that applies to all blocks you should use the following 2 classes..block_outer { }.block_inner { }.block_outer goes around the entire block and.block_inner applies to every advert. The names are obfuscated a bit to try and fool Ad Blockers into thinking it s regular code instead of adverts. 45

46 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin MANAGE YOUR ADS: Be in control of you adverts Ads from time to time need your attention. AdRotate has several warning mechanisms to help you keep up. And most of the time tell you exactly what s going on or needs to be done. Red Ad is expired. Immediate action required! Orange Ad is about to expire. You have less than 2 days to sort this out! Yellow This ad expires in less than 7 days! Green All seems well! Dashboard notifications 46

47 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin When issues arise a dashboard notification will show. Also from time to time s are sent out to the administrator (or other set address) to tell that person ads are in need of updates. You can configure notifications from settings. Bulk actions Removing, renewing, reset stats, activate, deactivate. You do it with bulk actions. Select any number of ads, click the action and click go. 47

48 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin How to implement adverts on your website Add ads, groups or blocks to pages or posts AdRotate generates the code for you when you add or edit ads. But you can create the code yourself too. Follow the example below. Using Shortcodes Shortcodes work on Pages and Posts only. Some themes support shortcodes in their text widgets. Examples: A random ad from a group: [adrotate group= 2 ] A specific ad: [adrotate banner= 12 ] Multiple groups and a random ad from either group: [adrotate group= 4,12,5,2 ] Group with optional fallback override (the fallback option is a group ID also): [adrotate group= 7 fallback= 19 ] A block of ads: [adrotate block= 3 ] 48

49 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin Managing banner images Using the media library AdRotate makes use of the WordPress Media Browser to include images if you want. This however, due to the design of that browser can be a bit confusing. Unfortunately this is out of my control. When adding your image you can upload it as normal. But using the image from the Media Library tab comes with a twist. It is important to use the right settings here. Use the following settings: Alignment: none Size: Full size Link URL: File URL If you do not use these settings your image will not be added to the ad and therefor not work. 49

50 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin Open adverts in a new window In some cases you might want to have advertisements open in a new window. Common ad code would look like something like this: <a href= ><img alt= src= meandmymacbanner.png /></a> To open this advert in a new window add target= _blank, like so. <a href= target= _blank ><img alt= src= images/meandmymacbanner.png /></a> 50

51 CHAPTER 2 // ASA Wordpress Administration Guide AdRotate Plugin Open adverts in a new window Tracking clicks for ads gives you an indication of how well such an ad performs. There are a few general rules on how ads are counted. Each click is logged. This log is kept for 24 hours. Which means if you were to click ad 1 right now and again in 5 minutes. The 2nd click is not counted because it s within the 24 hours. After those 24 hours a new click is counted. Using the User-Agent filter you can prevent bots or certain browsers to be registered. They can follow the link, but no click is counted. To enable click tracking you need to fill in the url to track (where the ad points to) and tick the box for click tracking. This will tell AdRotate to count clicks. Additionally you need to make the ad itself aware of the click tracker by substituting the url with a simple tag. Below the most simple form of a text link ad with click tracking enabled. Note how the URL is replaced with %link%. You can now follow the clicks on the Manage Ads page or allow users / advertisers to follow the performance on User Statistics. 51