28 JANUARY, Updating appearances. WordPress. Kristine Aa. Kristoffersen, based on slides by Tuva Solstad and Anne Tjørhom Frick

Transcription

1 Updating appearances WordPress Kristine Aa. Kristoffersen, based on slides by Tuva Solstad and Anne Tjørhom Frick

2 Agenda Brief talk about assessments Plan for WordPress lessons Installing themes Installing plugins

3 Assessments info Group installations Report vs. Web page Web page content (useful: Essay topic: me by 8th of march My «master» plan Focus on what you find interesting Possible oral presentation on 31st of march Course page Information about masters programme (in Norwegian)

4 WordPress lectures 3 lectures 1: appearances and plugins 2: adapting themes 3: creating a web page

5 What will you learn today Themes How to choose a theme How to install a theme How to update appearances through theme options and Customizer How to set a static front page Widgets Menus Plugins

6 Themes determines how the blog / website looks to visitors. style sheet, templates and options. Today: theme options that are available within the Admin interface Default theme: twentysixteen

7 How to choose a theme Make a list of the features you need in advance select based on those keep it as simple as possible. Focus on: Page layout Where are the navigation menus, sidebars and other positioning Theme functionality Do you need it to be responsive? How easy is it to customize, for you / for other users? Performance and support Load time? Is it regularly updated? Is it compatible with the browsers you need? What kind of support is available and for how long?

8 Which theme is WordPress using? Select Appearance from the menu. More information: Wordpress Codex on themes

9 Finding new themes Choose Appearance -> Themes and select the Add New button. WordPress offers numerous ways to search and filter (under Feature Filter) for themes in addition to lists over new, popular and featured themes. In addition the Free Themes Directory gives more options.

10 Installing new themes From within the WordPress administration interface Option 1: Find the theme you fancy preview the theme to see what it looks like choose Install to download and install the theme Option 2, Free Themes Directory: Download theme to your PC as a zip-file choose Upload Theme choose the zip-file you want to upload More information: WordPress Codex on installing themes

11 How do we change appearances? It s more than one way to change the appearance on the chosen theme: Appearances -> Customize Appearances -> Theme options Add new css rules to style.css (next lecture) Override with a new style.css in a child themes (next lecture) The possibilities for theme customization will vary between themes

12 Updating appearances through customize Give users the chance to change certain Theme features such as color and layout in a live preview format. The customizer may vary depending on the active theme. Appearance -> Header and Appearance -> Background will open these choices in the customizer

13 Theme options Some themes offer a few basic options regarding color schemes and layout under Appearance -> Theme options. For example the Responsive theme has these options: Theme elements Logo Upload Homepage Default Layouts Social icons CSS Styles Scripts

14 Static front page WordPress is a blog publishing tool, so the default front page is, of course, a blog Pages and posts To change to a static front page you usually have two options: Appearance -> Customize and click Static Front Page and choose which page to use as the front page. Settings-> Reading under Front page displays choose which page to use as the front page More information: WordPress Codex on creating a static front page

15 Widgets From the codex: WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets. Two questions: Where on your page should the widget be located? Which widget is to be used? More information: WordPress Codex on widgets

16 Add widget

17 Text widget The text widget will accept HTML and can contain almost anything HTMLsupported No WYSIWYG-mode, so you must either: Write your own HTML Make a Page in WYSIWYG mode, click «text» and then copy and paste HTML More information: Wordpress codex on using text widgets

18 RSS widget The RSS Widget displays the most recently published content from any source with an active feed RSS = Really Simple Syndication (or Rich Site Summary) Web feed of frequentliy updated info such as.. Blogs News Podcasts Other audio and so on More information: WordPress codex on using RSS widgets Also W3schools on XML RSS

19 Menus The Twenty Sixteen theme supports two menus, one primary menu and one social links menu. Both are located in the left sidebar. Other themes may offer more or less than that. The Responsive theme may have four menus. The possible locations are listed under Manage Locations'.

20 Edit a menu 1. Go to Appearance -> Menus 2. If you have more than one menu you have to choose witch one to edit from the dropdown list on the top. 3. To add new menu items choose from the column on the left. You may choose between three types of items: WordPress pages Links - an URL to internal (e.g. to a tag or post) or external pages WordPress categories 4. Check the appropriate boxes or fill in text for your choice and click Add to menu. 5. After the item has been added you have the option to change the menu label. 6. Drag-and-drop to change the order of the menu. 7. Click Save Menu

21 Create a new menu 1. Go to Appearance -> Menus and click on the create a new menu link 2. To create a menu it must be given a name that it used internally in WordPress. 3. Follow step 3-6 on the previous slide. 4. Choose a location for the menu under Theme locations and click Save Menu More information: WordPress Codex on menus

22 Menus In addition some widgets offer navigational behavior such as: custom menu links 1. Go to Appearance -> Menus and create a menu (how-to on previous slide) 2. Go to Appearance -> Widgets and add the custom menu - widget to the widget area of your choice 3. Give the menu a title 4. Select the menu you created in step one and save categories / tags

23 Plugins The WordPress Codex describes plugins as "tools to extend the functionality of WordPress. Many plugins will add a menu that lets you change settings for the plugin. Plugins may give you new widgets to use or add to your post or page edit screens More information: WordPress Codex on plugins

24 Important when using plugins Plugins are one of the more important reasons behind the white screen of death so take some precautions: Just install plugins you really need Use plugins from the plugins directory Research plugins thoroughly, on wordpress.org and google it Don t install in bulk. Test the site after every new plugin Uninstall and deactivate plugins you don t use

25 How to install plugins To add a new plugin go to Appearances -> Add plugin Search or browse for a plugin that satisfies your needs either in the plugins screen or through the wordpress plugins directory When you find a plugin click on it to see details then go to the plugin on wordpress.org (link in sidebar) for further research. Click on Install now Click on Activate plugin

26 Exercises 1. Find and install a new theme 2. Update the name of the site and any other improvements you choose through the theme customizer. 3. Add some widgets 4. Make a menu 5. Find and install a new plugin (start with something simple like Contact Form 7 or Simple Photo Gallery)