AUSTRIAN SERBIAN TOURISM PROGRAMMESAUSTRIAN SERBIAN TOURISM PROGRAMMES

Introduction to WordPress

Prof. dr Angelina Njeguš

Belgrade, 2014

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Agenda

Intro to WordPress

Registration

Login

Basic features

Create a Homepage

Create Custom Menus

Adding the widgets

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Intro to WordPress

Did you know that over 342 million people view more than 2.5 billion pages each month on the WordPress Platform?

WordPress became the most popular platform for the search engine optimisation experts.

Today, WordPress is no longer just a blogging platform, but with variety of features and functionality it is used by many a small business websites, corporate websites and eveneCommerce store website owners.

AUSTRIAN SERBIAN TOURISM PROGRAMMES

What is WordPress?

Open Source CMS system for creating websites and blogs

WordPress is built around two basic concepts:– Pages – static content (infrequently changed, example: „About us“

page)

– Posts – typical blog entries ie, series of articles, listed usually reverse-chronologically (for displaying latest news or company updates)

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Case studies

The following are just a very few examples out of millions of diverse sites powered by WordPress:

– Samsung Newsroom – www.samsungusanews.com

– The Ford Story – www.thefordstory.com

– Web Designer Wall – www.webdesignerwall.com

– Kobe Bryant – www.kb24.com (personal blog)

– Wheaton College – www.wheatoncollege.edu

– Mashable – www.mashable.com

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Let’s start

www.wordpress.com

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Registration

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Step 1: Set up

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Step 2: Choose free themes

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Step 3: Customize it

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Email address verification

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Email address confirmation

AUSTRIAN SERBIAN TOURISM PROGRAMMES

DashboardThe main administration homepage

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Under Settingschange Site Title

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Login

• Before making any change to your site, you will need to log in every time.

• The login for your site is typically found at the following URL: http://your-wordpress-site.com/wp-admin

– Please replace your-wordpress-site with your actual domain name

• Once you have logged in, the WP Dashboard appears - main administration homepage

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Navigating Around the Admin panel

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Sign up your public profile

• When you create your WordPress.com account you are not just creating a blog or a website, youare joining a community.

• A Gravatar (which stands for “Globally Recognized Avatar”) is an image you choose that will appear next to your name when you comment on or post to a blog

• To fill out your public profile, log in to your WordPress.com dashboard and click on Users >> My Profile

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Changing the password

Go to Users -> Personal Settings -> Account Details -> Insert the new password.

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Configure basic site settings

In your dashboard, go to Settings >> General, and enter your site’s title and your new tagline

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Screen options

To simplify administration pages (either for yourself or for someone elsewho is using the site) choose Screen options drop down in the top right of the screen

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Change the theme

A theme is a template for your site — it creates the layout– You can switch whenever you’d like

Go to Appearance >> Themes in your dashboard. – Click on a theme to see what it looks like, read a brief description, and

browse a list of its features.

– See demo versions in the Theme Showcase

There are over 200 themes to choose from on WordPress.com

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Column options• Manifest is a one-column

theme: all posts, all the time.

• Delicacy has two columns; posts on the left, extras on the right.

• Ideation and Intent is a three-column theme, giving you room to show off a Flickr stream or your Goodreads list along with basic widgets like a blogroll or your archives.

• Fjords has four columns, so you can load up on widgets.

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Customize the theme

Appearance Themes Click on Free Preview Activate Customize your site:

Try these options:• Choose appropriate Colors• Insert the logo in the Header• Insert Facebook widget• Set Site title and tagline ...

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Create your first web page

• On the dashboard choose Pages >> Add New and name it Home

• Type welcome note

• Add youtube link (Add Media) or/and Photo

– Once you find video on Youtube, click on Share and Copy link

– Paste the link into the Page, but in Text editor

• Click on Publish

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Add another page

• Create the another page and name it something like “Membership“ or „About us“

• Type some text and insert the image

• Add form (next slide)

• Click on Publish

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Add form

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Customize the page with Screen Options

• To remove Leave a Comment on the page:

– Go to the page for editing

– Choose Screen Options (top right side of the screen)

– Check the box besides Discussion

– Go to Discussion underneath the page, and uncheck two boxes Allow comments, andAllow trackbacks and pingbacks on this page

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Exercise 1: Create „About us“ page

• Insert the text

• Insert an image

• „About us“ page is the parent page for:

– Educators

– Students

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Exercise 2: Create pages Educators and Students

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Some tips for homepage1. Create a welcome message and linked list of your favorite posts.2. Welcome new users with a video or audio message or introduction, which

you learned how to embed in Get Flashy:1. Add Media2. Insert YouTube3. Paste the link!

3. Create a gallery, single full-width image, or slideshow to show off some of your best work, which you learned all about in Get Flashy:– Create New Page – Gallery– Click on Add Media to access your Media Manager– Click on Create Gallery – Insert– Publish and Preview– Go to Settings – Media, and check the option under Tiled Galleries: Display all your

gallery pictures in a cool mosaic

Note: More options on http://learn.wordpress.com/

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Principles of good content structure

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Home page – Categories – Posts

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Example of good web site structure

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Example of web site structure

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Case study: IBM site structure

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Creating Custom Menus

Defining a menu, adding items to a menu, customising menu items using the „Navigation Label“, and „Title Attribute“ options, deleting menu items and creating multi-level menus.

Appearance – Menus

– Enter a name for your new menu in the Menu Name box: Main Menu

– Click on Create Menu

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Adding Items to a Menu

• See a list of all the pages that are currently published on your site under Page >> View All

• Select the pages you want to add to your menu by clicking the checkbox to the left of each item’s title

• When you have selected the pages you want to include, click the Add to Menu button

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Reorder the pages

Click and drug the boxes in different positions

Some pages could appear as sub item if you move their boxes on the left

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Menu settings

Under Menu Settings check Top primary menu

Save it, and Preview.

AUSTRIAN SERBIAN TOURISM PROGRAMMES

How to add custom Home page to the menu?

• Appearance – Menus

• Click on Links

• Add URL address of your website:– http://www.singidunumdmi.wordpre

ss.com

• Under Link Text, type Home

• Click on the button Add to Menu

• Reorder Home page, and put on the top

• Click on Save menu

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Adding the widgets to the page

Adding widgets to the side bar:

• Go to AppearanceWidgets

• Open Sidebar where you want to put the widgets

• Move the calendar to the slidebar

• Title: Calendar

• Save

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Add more widgets

Add the widget: Custom Menu

– Title: Our Pages

– Select Menu: Main Menu

– Save

Add the widget: Text

– Title: Some interesting Stuff!

– Add more text:

– Save

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Adding image to the sidebar

• Add the widget: Image– Title:

Singidunum University

– Image URL:

imagewebaddress.jpg

– Alt text:

Singidunum University logo

– Image Alignment:

Center

– Link URL (when the image is clicked):

www.singidunum.ac.rs

– Save

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Exercise 2: Add the widget „Search“

Add the widget: Search on Primary Sidebar

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Changing the HomepageHow to turn your page as a Homepage?

• Appearance – Customize– Click on Front

– Front page displays change to A static page

– Under Front page: select Home page or another

– Save

– Change more Front page options (depends of the template)

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Another way of choosing the homepage

• Settings >> Reading, and scroll to „Front page displays“ (Theme-specific – your blog may not have this setting).

• Click the button next to „A static page“ and select both the page you decided to use as your homepage (Home), and the blank one you created to house your blog (eg. Events).

• Click on Save settings

• The result is that when you go to your web address, you should now see your new homepage rather then blog posts when start.

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Exercise 3: Create page „Contact us“

1. Type Contact Address as shown– Be aware to add inline styling in Text

editor

2. Add Google Map– Add Location

– Go to google.maps, and search for the address. Click on Settings, and click on Share and embed map. Click on embed map, and scroll for Small image. Copy HTML tag into your Page but under Text editor (HTML editor)

3. Add Contact Form– As shown on the next slide

– Add occupation, and move it up

– Fill email notification

– In preview mode send an email

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Exercise 3 (cont.)

Add Contact Form

– Add styling to the heading <h5>

– Add occupation to the form, and move it up

– Fill email notification

– In preview mode send an email

AUSTRIAN SERBIAN TOURISM PROGRAMMES

Result