====== Frontpage and temporary country sites ====== ===== Who is this guide for ===== * ODM Core editors customizing the content presented in the frontpage of each site * Developers tweaking the UI of this pages ===== What this guide teaches ===== * How to manage content in the featured box * How to tweak the look and feel of the featured box * How to manage content in the footer of the frontpage * How to manage content in the footer of the temporary country sites ===== Things to know beforehand ===== ==== Finished vs temporary country sites ==== Depending whether the site is ready for publication ( currently mekong and cambodia sites are ) or in a temporary state, the corresponding wordpress site has to be configured accordingly. This functionality can be achieved by specifying particular settings in wordpress settings as [[http://opendevelopmentmekong.net/wp-admin/options-general.php|Settings > Reading]], [[http://opendevelopmentmekong.net/wp-admin/themes.php?page=opendev_options|Appearance > Themes > Open Development Theme]] and using a series of plugins ==== 2 Plugins involved ==== To provide extra functionality, two plugins have been installed: * **Featured areas**: Provides functionality of the featured content box used to present relevant content in both active and temporary country sites. * **Flexible posts widget**: Gives the ability to list posts from different categories as a widget. This is used for listing the **announcement and press releases** and **site updates** sections of the active sites. ===== Managing content on the frontpage of active sites ===== ==== Relevant configuration ==== In order to define a site as active, following settings should be considered: * [[http://opendevelopmentmekong.net/wp-admin/options-reading.php|Settings > Reading]]: Frontpage displays will be Your latest posts. {{ :db:bildschirmfoto_2015-06-15_um_00.30.09.png?300 |}} * [[http://opendevelopmentmekong.net/wp-admin/themes.php?page=opendev_options|Appearance > Open Development Theme]]: * **Site in development** will be disabled. * **Enable dropdown box of the country menu** for more information on header * Enable **Show site intro texts** to show the 3 site intro links to topic pages * Specify **Frontpage slider id** to show corresponding slider createad with [[http://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider|Featured areas plugin]], see [[#adding_the_slider_to_the_frontpage|instructions below]] {{ :bildschirmfoto_2015-06-15_um_00.32.46.png?300 |}} ==== Managing content presented in the featured box ==== First, the [[http://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider&page=fapro_settings|plugin's settings]] need to be configured accordingly. ===== Configuring the FA Pro plugin ===== First, open the [[https://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider&page=fapro_settings|FA Pro > Settings]] screen. In the different sections you are going to be able to tweak certain parameters for the sliders. Relevant values that should be specially considered are: **Settings/Custom posts**: Specify the post types that you want to be able to feature in the sliders. **License/CodeFlavors License key**: Specify the corresponding license key ===== Creating a slider ===== Most probably you want now to create a new slider for the active frontpage.Head to [[https://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider|FA Pro > Sliders]] and click the **Add new** button. Following screen will be presented: {{ ::bildschirmfoto_2015-09-03_um_09.45.41.png?300 |}} After providing a title (Recommended "Frontpage featured box"), you can select which posts will be featured on it. You can select them manually by specifying **Mixed Content** on the slider content section and select them yourself, or filter posts automatically by post type, category, author, etc... Browse through the **Text options** and **Media options** tabs and pay special attention at the following parameters: **Get content from:** Select custom text for slide. **WordPress image size:** Select large. Now scroll below and among the different themes select **opendev**: {{ ::bildschirmfoto_2015-09-03_um_09.48.46.png?300 |}} Browse through the **Layout**, **Animation** and **Publish** tabs and pay special attention at the following parameters: **Layout variations:** Select Image left, content right **Slider width:** Select 1160 **Slider height:** Select 400 Now you are ready configuring the slider, click on publish and take note of the Slider id on the right sidebar. You will need it very soon: {{ ::bildschirmfoto_2015-09-03_um_09.57.17.png?300 |}} ===== Adding the slider to the frontpage ===== As mentioned on the [[#relevant_configuration|Relevant configuration section]] there is a parameter on the Open Development Theme settings to specify the **Frontpage slider id**. Add the id number of the slider you just created on it, save the settings and the slider should now be visible on the frontpage. ===== News container and Announcements and press releases ===== The configuration for both two sections is similar. These boxes, presented at the bottom of the frontpage, are managed as Wordpress widgets. {{ ::bildschirmfoto_2015-09-03_um_10.03.19.png?300 |}} In order to specfiy which contents appear on each of the sections, head to [[https://opendevelopmentmekong.net/wp-admin/widgets.php|Appearance > Widgets]] section where you will find two widget areas called **Frontpage footer left** and **Frontpage footer right**. {{ ::bildschirmfoto_2015-09-03_um_10.06.21.png?300 |}} You can drag and drop any Wordpress widget from the list on the left. However, for the news container and announcements and press releases sections, currently **Flexible post widgets** are used. This widget (which is installed [[https://wordpress.org/plugins/flexible-posts-widget/installation/through a wordpress plugin]]) allows to select certain post types to be presented on the box. Specify parameters such as the maximum number of posts to present or the post type (Announcements & site updates respectively) and **very important**, select the corresponding template: {{ ::bildschirmfoto_2015-09-03_um_10.09.22.png?300 |}} ===== Managing content on the frontpage of temporary country sites ===== ==== First create a page with the Upcoming site template ==== Go to [[https://laos.opendevelopmentmekong.net/wp-admin/post-new.php?post_type=page|Pages > Add new]] menu item in the left sidebar and specify title and content for the upcoming site page. On the right menu, do not forget to select **Upcoming site** in the **template** dropdown list available on the **Page attributes** box on the right sidebar. {{ ::bildschirmfoto_2015-09-03_um_10.15.27.png?300 |}} Hit the publish button so the page gets created. ==== Relevant configuration ==== In order to define a site as a temporary country site, following settings should be considered: * [[http://opendevelopmentmekong.net/wp-admin/options-reading.php|Settings > Reading]]: A static page (select below) On the Frontpage dropdown menu, select the page that you just created on the step above. {{ ::bildschirmfoto_2015-09-03_um_10.14.55.png?300 |}} * [[http://opendevelopmentmekong.net/wp-admin/themes.php?page=opendev_options|Appearance > Open Development Theme]]: * **Site in development** will be disabled. * **Enable dropdown box of the country menu** for more information on header * Enable **Show site intro texts** to show the 3 site intro links to topic pages * Specify **Frontpage slider id** to show corresponding slider createad with [[http://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider|Featured areas plugin]], see [[#adding_the_slider_to_the_frontpage|instructions below]] {{ :bildschirmfoto_2015-06-15_um_00.32.46.png?300 |}} ==== Managing content presented in the featured box ==== Same as in [[#managing_content_on_the_frontpage_of_active_sites| Managing content on the frontpage of active sites]] ==== Footer area and related resources ==== Analog to the [[#news_container_and_announcements_and_press_releases|News container and annoucements and press releases boxes on the frontpages]], the temporary country pages feature as well following widget areas on the bottom of the site: The configuration for the three boxes is similar. These boxes, presented at the bottom of the page, are managed as Wordpress widgets. {{ ::bildschirmfoto_2015-09-03_um_10.30.25.png?300 |}} {{ ::bildschirmfoto_2015-09-03_um_10.29.35.png?300 |}} In order to specfiy which contents appear on each of the sections, head to [[https://opendevelopmentmekong.net/wp-admin/widgets.php|Appearance > Widgets]] section where you will find two widget areas called **Upcoming footer left**, **Upcoming footer middle** and **Upcoming footer right**. You can drag and drop any Wordpress widget from the list on the left. However, currently following configuration is recommended for the different boxes on the temporary country sites: **Upcoming footer left**: An instance of the OD Query resources widget which queries data from the CKAN instance specified on the [[https://laos.opendevelopmentmekong.net/wp-admin/options-general.php?page=wpckan|WPCKAN settings]]. {{ ::bildschirmfoto_2015-09-03_um_10.32.17.png?300 |}} **Upcoming footer middle**: A text widget with an embedded image and a link to the map explorer. **Note that this text box contains HTML notation!!** {{ ::bildschirmfoto_2015-09-03_um_10.34.06.png?300 |}} **Upcoming footer right**: A text widget with a list of links to related resources. **Note that this text box contains HTML notation!!** {{ ::bildschirmfoto_2015-09-03_um_10.35.08.png?300 |}}