1. Webpages and Blogging through Wordpress with Flexible Theme. This tutorial
is intended for users who already have some experience with Wordpress.
Webpages and Blogging through Wordpress with Flexible Theme This tutorial is intended for users who already have some experience with Wordpress. It covers the creation of new pages with the Flexible theme. However, it can come in handy for users who want to transition from another Wordpress theme to Flexible. Note that displaying each of the sections (gallery, quote lines, recent work and blog) is optional. In this tutorial we will disable the Recent Work section.
Flexible Theme Overview
Figure 1 - Overview
1
Setting up and creating content 1. Log In You can Log in at the page https://muse.union.edu/your-username/wp-login.php (fig. 2)
Figure 2 - Login form
Your user name is your Union email account (without “@union.edu”). The password is your Union email password. After you log in you will be brought to the Dashboard page. From here you can create and modify the content of your web pages. 2. Set up the Flexible theme In the menu on the left, go to Appearance and Themes. In the list of themes, find Flexible Theme and activate it. See figure 3 for details.
Figure 3 – Dashboard
2
3. Preview the site Let’s see how the Homepage looks. Click on your name displayed in the dark grey bar in the upper-left corner of the screen (fig. 4).
Figure 4 - Click to see the Homepage
Tip: open the Homepage in a new tab so that you can modify the content in one tab and see the effect in the second one. Remember to refresh the page whenever you make some changes to it. Otherwise, you will not see them. 4. Create a new page Go back to the Dashboard page. In the left menu, click Pages and Add New. (See figure 5)
Figure 5 – How to add new page and change the template
You will be taken to the page shown in figure 6. Type the name of your page and its content. You can also select the template or featured image.
3
Figure 6 - Adding New Page
5. Add a featured image Click Set Featured Image to add an image that will be shown on the page and also as a thumbnail on the Homepage. In the new window you will be able to upload a new image from your computer, use an URL (basically an address of the image somewhere on the internet) or select an image you have already uploaded. Note that the window allows you to edit the image, use a thumbnail of the image and more. After you save all changes and publish the new page, the homepage should look like figure 7 (except for the featured image – you will have your own).
Figure 7 - The look of the homepage after creating first post
4
6. Add a new post Go back to Dashboard. In the menu on the left, click Posts and Add New. (See fig. 8) The page for adding new posts looks very similar to the one for adding new pages. Type the name of the post, its content and set the featured image. Then publish the post. Note that by publishing the post, a link to new “Blog” category was created in the menu bar.
Figure 8 - Adding new post
Configuring appearance through epanel Epanel (fig. 9) allows you to control your website. Additional features allow you to toggle on and off features, adjust the layout, manage colors and etc. 7. Set up the Quote Lines and the Recent Work section Create two new pages and two new posts as described above. When creating new pages try using the “Full Width Template” (see figure 5 to change the template) or other templates to see the difference. Then go to Appearance -> Flexible Theme Options. The page now displayed is called epanel (See fig. 9).
Figure 9 – The epanel
5
Click the Homepage tab at the top of the screen. You will see boxes named Quote Line 1 Text and Quote Line 2 Text. See figure 10 for details. The quote lines are displayed on the homepage (see fig. 1). You may change them to whatever you want. (We changed the first line to “Union College” and the second to “Redefining the Liberal Arts”). You can also disable them. The Recent Work section is not designed for our needs and therefore you should disable it. To do so, go to the Homepage tab and click the button in the “Display Recent Work Section” box (See fig. 10).
Figure 10 – The Recent Work section is disabled
8. Change the logo To change the logo, go to epanel. The first option allows you to change the logo. Click Upload Image, and then you can either upload a new image or use one of the existing images. Then click the button to display the logo and save the changes. If you want to remove the text displayed next to the image, go to Settings -> General and remove the Tagline.
Figure 11 - the homepage after changing the logo
6
9. Set up Featured Slider o epanel and click The Featured Slider setting (see fig. 1) has to be changed to fit your needs. Go to Featured Slider tab at the top of the screen. Then enable the Use pages option and select which pages should be a source to the featured slider. (See fig. 12)
Figure 12 - Using pages as a source to featured slider
10. Place thumbnails on pages By default, when visiting pages that have a featured image image, the featured image is not displayed. (Fig. 13) 1
Figure 13 – New page with the Thumb option disabled (no thumbnail is displayed)
7
To place a thumbnail of featured image to the page, go to epanel -> Layout Options and click the Single Page Layout. Enable the Place Thumb on Pages option. Now, your pages should look like image in figure 14.
Figure 14 – Thumbnails are now displayed
Setting up a blog Create a new page and set its template to Blog Page. Now, every post you create will be listed on this page. You may exclude the “Blog”” label from the menu bar. To do so, go to epanel -> > Navigation -> Categories and exclude the “Blog”” category from the navigation bar (the green icon will change to t red cross after disabling it). If you would like to list all blog posts on the homepage, you may go to the General tab in epanel and enable the Blog Style post format option. Then, all blog posts will be listed on the homepage.
Getting more help To get more help, please visit http://www.elegantthemes.com/gallery/flexible/readme.html (also accessible via epanel), http://codex.wordpress http://codex.wordpress.org/ or http://wordpress.org/support/..
8
