EVENT MANAGER THEME INSTALLATION TUTORIAL

Transcription

1 EVENT MANAGER THEME INSTALLATION TUTORIAL v2 Last Updated 9/03/ Version 3.9.5

2 Thank you for choosing to use the Event Manager Theme, built on WordPress and Genesis. If you are not confident with Wordpress we invite you to purchase a support license at Helpful links: Genesis Theme Framework WordPress Support How to Install the Theme - Install WordPress 3.3 and above (the Theme won t work with previous versions) - Upload Event-Manager and Genesis into /wp-content/themes - Go to Appearance > Themes and click "Activate" on event theme Required Plugins Once activating this theme, you should be prompted to automatically install three plugins. The Event Manager Theme Functionality plugin contains the core functionality of this theme and is required. This allows us to provide ongoing improvements and new features easily without interfering with any of your theme customizations. The second plugin is Posts 2 Posts, which allows you to link Sessions and Speakers. If you haven't done so already, please install and activate these plugins. There should be a notice at the top of this screen to start the installation. Recommended Plugins 1 Gravity Forms - The best contact form plugin available 2 Contact Form 7 - The best free contact form plugin available 3 Genesis Simple Sidebars - Create additional sidebars for specific pages 4 Genesis Title Toggle - Disable page titles on certain pages

3 Event Information Go to the Event Manager Settings section to set up your event's information. In the first box (Event Information) you can define the date, location, and registration information. Sample information will already be entered to help guide you. In the second box (Homepage Introduction) you can add additional content that displays below the site title on the homepage. By default there is two columns of text, but you can change this by clicking the HTML tab. See the Content Columns section below for more information. In the third box (Footer Text) you can specify the text on the left and right of the footer. Again, there is sample text to help guide you.

4 Menu To set up the menu at the top of the page, first go to Genesis > Theme Settings and check "Include Primary Navigation Menu". Then go to Appearance > Menus, type a "Menu Name" (ex: Primary Menu), then click "Save Menu". Then in the left column, select your menu from the "Primary Navigation Menu" dropdown. Now you can add pages to your menu and have them appear at the top of all your site's pages. You can also include a search form like the demo site by going to Genesis > Theme Settings, checking "Enable Extras on Right Side", and selecting "Search form". Here is a great tutorial to start with Custom Menus.

5 Homepage and Sidebar The homepage features three columns of "widget areas", which allow you to drop prebuilt widgets or text in any order and column you choose. Go to Appearance > Widgets to manage the three widget areas: Home Left, Home Middle, and Home Right. On the demo site, the sidebars feature the following widgets: 1 Home Left: a text widget with general information about the event. 2 Home Middle: the Genesis - Featured Posts widget to display latest news, and Genesis - Latest Tweets widget for displaying recent twitter updates. 3 Home Right: the Speakers Widget for displaying all the event's speakers, and a text widget containing images (you can uploade them in the media section) of sponsor logos (Width of the logo can t be more than 290px). In the Widgets are you will Notice on the top right corner a Primary Sidebar Widget. This sidebar shows in each page (or blog post) other than the Press and Registration pages, which have the possibility to change the configuration of widgets. You can apply the Registration or Press Sidebar configuration to other pages. Here is an example of how to do it with your schedule. 1. Edit the Page

6 2. Select the desired sidebar configuration here

7 Footer The footer is made of 3 areas editable in the Appearance->Widgets section. In the demo site we ve added a list of our social networking handles by adding the Connect Widget and filling in each profile in Footer 1. In Footer 2 we ve placed a Twitter Hashtag button. You can do that by adding a Text Widget then head to and fill in your details. Then copy the code and paste it in the widget. In Footer 3 we ve added a LinkedIn button. We ve again used a text widget and got our code from You can choose whatever you prefer, Facebook Like or a Newsletter link.

8 Homepage Rotator This theme has a built-in image rotator on the homepage, which displays above the three widget areas. It is only displayed if images have been added. Go to Rotator->Add New and click "Set Featured Image". Upload an image, then click "Use as Featured". The image will automatically be scaled down to 205px tall, so make sure the image is at least that tall. The ideal width is 307px You can specify the image order by using the "Order" attribute in the right column (lower numbers come first).

9 Speakers Go to Pages > Add New and create a page with any name you'd like (ex: Speakers). In the right column, under Page Attributes select "Speakers" as the page template. Publish the page. This creates the page that you can now add to your menu. To populate the page with speakers, go to Speakers > Add New. Give the speaker a name in the title area and describe the speaker in the editor. Provide the speaker's website URL and twitter username in the Speaker Details box (both are optional fields). Upload their photo by clicking "Set Featured Image", uploading it, then clicking "Use as Featured". Specify the order in which they are displayed using the "Order" field in the right column. If you've created a session that this speaker will participate in, select it in the Connected Sessions area.

10 Schedule Go to Pages > Add New and create a page with any name you'd like (ex: Schedule). In the right column, under Page Attributes select "Schedule" as the page template (See Speakers to learn how to select a template). Publish the page. This creates the page that you can now add to your menu. To populate the page with sessions, go to Sessions > Add New. Give the session a title and describe the session in the editor. Under Session Details, select a date, time, and describe the location. The date and time are used for sorting the sessions. Connect a speaker to this session from the Connected Speakers section. If you'd like to group your sessions (ex: Day 1, Day 2), go to Sessions > Session Groupings and create your groupings. Give each grouping a Name (ex: Day 1) and Description (ex: 23 Nov 2011). Then edit your sessions and add them to the appropriate groupings.

11 FAQ The FAQ in the demo is built using a standard page (no page template is needed). To link to individual answers: 1 Type the answer as a headline (ex: h3) 2 Switch to HTML view and give it a unique id ( ex: id="answer1") 3 Switch back to Visual view, type the answer at the top in the Questions section 4 Select the answer, click the Link button, and for the URL put #answer1 (where answer1 is the same as your unique id). Here's an example

12 Registration Event Manager Theme has been built to host external event registration widgets to make sure the website is fast and not overly complicated. The registration page has been built to work with Eventbrite Go to Pages > Add New and create a page with any name you'd like (ex: Registration). In the right column, under Page Attributes select "Registration" as the page template. Publish the page. Below the editor you'll now have a box that says "Registration Iframe". You can drop an iframe from your registration service (ex: EventBrite) and it will automatically be added to the end of the page's content. You can obtain the embed code from Eventbrite by creating an event at Then head to your event dashboard and select Add Ticket Form to Website from the Promote section.

13 Copy the code in the section below and paste it on the Registration iframe Box on your Registration Page. Header and Custom Logo The theme is built to feature a custom logo of 960x100px You can upload your custom logo under Appearance->Header. Make sure to select No on the Display Text option to remove the text. If you have a logo of a different size than 960px x 100px we do not recommend to use it as it may compromise the functionality of the theme. Nonetheless there is a procedure to change the theme functions.php and stylesheet to reflect your preferred height. Again we do not guarantee full functionality of the theme with the following procedure but you are free to test it out on your website. While editing the height should not be an issue, using a width of less than 960x may result in some problems. You can test with the procedure below different renderings. 1. Before you begin, please run a full backup of your website. As the following procedure is not part of the theme build it may result in errors. 2. Locate (Appeareance->editor) the functions.php file and look for add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 100, 'textcolor' => '333', 'admin_header_callback' => 'sc_admin_style', 'header_callback' => 'sc_custom_header_style' ) );

14 3. Change only the height to your desired height in pixel - if your logo is 250px tall change "height"=> Then go to the CSS (stylesheet.css) 5. Look for #header #title div (near line number 130) 6. Change line-height: 100px; to the same height you set. In the example above your height will be 250 so line-height: 250px; 7. Go to the header section and upload your logo. If you are not sure about the above procedure we recommend seeking professional advice or to use support if you purchased a support license. We can't recommend enough to be extremely careful with the above changes as even the tiniest addition like an extra space could break the site. So please back up. Custom Logo for Mobile Website If you uploaded a custom logo you may want to add a mobile-friendly version of it to make sure it displays properly. Here is how to do it: 1.Please create a new logo suitable for mobile devices, we suggest 290px width and 50px height. 2.upload logo to /wp-content/themes/event-manager-0.9.5/event-manager/images, please note the filename of the image 3.navigate to (Appearance->editor) the style.css file and look for /* Resize Site Title */ #header #title { font-size: 48px; line-height: 50px; margin: 20px 10px 10px; } (near line 1736 ) 4.add this line to this piece of code background:url(images/logo.jpg) no-repeat!important;

15 ( logo.jpg is the filename of the new logo, if the image is in any other formate like png or gif please mention it, eg logo.png, mobilelogo.gif etc) the end result will look like this: #header #title { font-size: 48px; line-height: 50px; margin: 20px 10px 10px; background:url(images/logo.jpg) no-repeat!important; } 5.If the mobile logo height is greater than 50px, please change the line-height (2nd line) to the same height as the logo.

16 Contact The theme is designed to work with both Gravity Forms (paid plugin) and Contact Form 7 (free plugin). Install the plugin of your choice, build the form in the appropriate section, then create a page and drop the appropriate shortcode in it. If using Contact Form 7, you might want to customize the HTML of the form itself. Here's the HTML from the demo site's form: Content Columns This theme has Content Columns built-in so that you can create multiple columns of content. For example, the Press page in the theme demo has two columns of content, in addition to the sidebar on the right. To create multiple columns, click the "HTML" tab on the editor and type the appropriate HTML code. Then switch back to the "Visual" tab and fill those content areas in. For two columns, use this: <div class="one-half first">this is the left column</div> <div class="one-half">this is the right column</div> For three columns, use this: <div class="one-third first">this is the left column.</div> <div class="one-third">this is the middle column.</div> <div class="one-third">this is the right column.</div> For more information, see How to use column classes.

17 Advanced Customization If you're a developer, there are hooks and filters in the Event Manager Theme Functionality plugin so that you can customize it to your needs. 1 apply_filters( 'sc_speaker_metabox_override', ' return_true' ); will remove the Speaker Details metabox (so that you can create your own) 2 apply_filters( 'sc_session_metabox_override', ' return_true' ); will remove the Session Details metabox 3 cmb_meta_boxes filter can be used to create your own metaboxes. See the metabox wiki and example file for details And of course the theme can be completely customized through the theme files. All future functionality will come through plugin updates, so you are free to tweak the theme.