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

http://www.samsungusanews.com/

http://www.thefordstory.com/

http://www.webdesignerwall.com/

http://www.kb24.com/

http://wheatoncollege.edu/

http://www.mashable.com/


Let’s start

www.wordpress.com

http://www.wordpress.com/


Registration


Step 1: Set up


Step 2: Choose free themes


Step 3: Customize it


Email address verification


Email address confirmation


DashboardThe main administration homepage


Under Settingschange 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

http://your-wordpress-site.com/wp-admin


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


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

http://theme.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.

http://theme.wordpress.com/themes/manifest/

http://theme.wordpress.com/themes/delicacy/

http://theme.wordpress.com/themes/ideation-and-intent/

http://theme.wordpress.com/themes/fjords/


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, andAllow 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 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/

http://learn.wordpress.com/get-flashy/#embed

http://learn.wordpress.com/get-flashy/

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 AppearanceWidgets

• 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 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)


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

Technology

Transcript of Lesson 07 WordPress part 1