Lesson 07 WordPress part 1

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

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 even
eCommerce store website owners.

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)

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

Let’s start
www.wordpress.com

Registration

Step 1: Set up

Step 2: Choose free themes

Step 3: Customize it

Email address verification

Email address confirmation

Dashboard
The main administration homepage

Under Settings
change Site Title

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

Navigating Around the Admin panel

Sign up your public profile
• When you create your
WordPress.com account you are not
just creating a blog or a website, you
are 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

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

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

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

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

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.

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 ...

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

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

Add form

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, and
Allow trackbacks and
pingbacks on this page

Exercise 1: Create „About us“ page
• Insert the text
• Insert an image
• „About us“ page is the parent page
for:
– Educators
– Students

Exercise 2:
Create pages Educators and Students

Some tips for homepage
1. 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 Media
2. Insert YouTube
3. 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/

Principles of good content structure

Home page – Categories – Posts

Example of good web site structure

Example of web site structure

Case study: IBM site structure

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

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

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

Menu settings
 Under Menu Settings check Top primary menu
 Save it, and Preview.

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

Adding the widgets to the page
Adding widgets to the side bar:
• Go to Appearance  Widgets
• Open Sidebar where you want to
put the widgets
• Move the calendar to the slidebar
• Title: Calendar
• Save

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

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

Exercise 2: Add the widget „Search“
 Add the widget: Search on Primary Sidebar

Changing the Homepage
How 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)

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.

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

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

Result

Lesson 07 WordPress part 1

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Lesson 07 WordPress part 1 (20)

More from Angelina Njegus (7)

Recently uploaded (20)

Lesson 07 WordPress part 1

Editor's Notes