WORDPRESS BASICSIEEE CMS WORKSHOP

Δημήτρης ΤερζόπουλοςΔημήτρης Ζαρκάδας

IN THE PREVIOUS WORKSHOPStatic and Dynamic Pages

Static page Dynamic page

Server

Server

Client

Client

Database

DataProcessing

IN THE PREVIOUS WORKSHOPStatic and Dynamic Pages

Static page Dynamic page

Server

Server

Client

Client

Database

DataProcessing

SERVER + DOMAIN NAMEpapaki.gr

SERVER + DOMAIN NAMEpapaki.gr

DONE

DOWNLOAD WORDPRESS

UPLOAD WORDPRESS TO SERVER

CREATE A DATABASE

CONFIGURE AND INSTALL WORDPRESS

Ready to use Wordpress!

Posts vs Pages

Categories vs Tags

Comments

MAIN PAGEWordpress Structure

MAIN PAGEWordpress Structure

MAIN PAGEWordpress Structure

MAIN PAGEWordpress Structure

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

Information about who we are and why

we do it

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

Information about who we are and why

we do itThe schedule of each team

(dates of workshops etc)

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

Information about who we are and why

we do itThe schedule of each team

(dates of workshops etc)

Will contain each lecture’s

files (presentations,notes, videos

etc)

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

Information about who we are and why

we do itThe schedule of each team

(dates of workshops etc)

Will contain each lecture’s

files (presentations,notes, videos

etc)

News concerning

the workshop

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Wordpress main page

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

Information about who we are and why

we do itThe schedule of each team

(dates of workshops etc)

Will contain each lecture’s

files (presentations,notes, videos

etc)

News concerning

the workshop

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Wordpress main page Static Page

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

Information about who we are and why

we do itThe schedule of each team

(dates of workshops etc)

Will contain each lecture’s

files (presentations,notes, videos

etc)

News concerning

the workshop

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Wordpress main page Static Page

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

Information about who we are and why

we do itThe schedule of each team

(dates of workshops etc)

Will contain each lecture’s

files (presentations,notes, videos

etc)

News concerning

the workshop

Static Pages

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Wordpress main page Static Page

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

Information about who we are and why

we do itThe schedule of each team

(dates of workshops etc)

Will contain each lecture’s

files (presentations,notes, videos

etc)

News concerning

the workshop

Static Pages Category with Posts

SITE STRUCTUREWordpress Workshop site example

Home Page About ScheduleTeam ATeam B

Lectures News

Wordpress main page Static Page

Will contain some brief information

about the workshop, our latest news, a

calendar with our schedule etc

Information about who we are and why

we do itThe schedule of each team

(dates of workshops etc)

Will contain each lecture’s

files (presentations,notes, videos

etc)

News concerning

the workshop

Static Pages Category with Posts

Category with Posts

SITE STRUCTUREWordpress Workshop site example

Lectures

Will contain each lecture’s

files (presentations,notes, videos

etc)

Category with Posts Lecture 1: Interet & Cms

Lecture 2: Wordpress Basics

SITE STRUCTUREWordpress Workshop site example

Lectures

Will contain each lecture’s

files (presentations,notes, videos

etc)

Category with Posts Lecture 1: Interet & Cms

Post in category “Lectures”

Lecture 2: Wordpress Basics

SITE STRUCTUREWordpress Workshop site example

Lectures

Will contain each lecture’s

files (presentations,notes, videos

etc)

Category with Posts Lecture 1: Interet & Cms

Post in category “Lectures”

Lecture 2: Wordpress BasicsPost in category “Lectures”

SITE STRUCTUREWordpress Workshop site example

Lectures

Will contain each lecture’s

files (presentations,notes, videos

etc)

Category with Posts Lecture 1: Interet & Cms

Post in category “Lectures”

Tags: “intenet”, “cms”, “domain & hosting”

Lecture 2: Wordpress BasicsPost in category “Lectures”

SITE STRUCTUREWordpress Workshop site example

Lectures

Will contain each lecture’s

files (presentations,notes, videos

etc)

Category with Posts Lecture 1: Interet & Cms

Post in category “Lectures”

Tags: “intenet”, “cms”, “domain & hosting”

Lecture 2: Wordpress BasicsPost in category “Lectures”

Tags: “installation”, “create a post”, “create a page”, “install a theme”

SITE STRUCTUREWordpress Workshop site example

Team A starts at 12/11/12

Video Lectures are now available!

News

News concerning

the workshop

Category with Posts

SITE STRUCTUREWordpress Workshop site example

Team A starts at 12/11/12Post in category “News”

Video Lectures are now available!

News

News concerning

the workshop

Category with Posts

SITE STRUCTUREWordpress Workshop site example

Team A starts at 12/11/12Post in category “News”

Video Lectures are now available!Post in category “News”

News

News concerning

the workshop

Category with Posts

SITE STRUCTUREWordpress Workshop site example

Team A starts at 12/11/12Post in category “News”

Tags: “announcement”, “schedule”

Video Lectures are now available!Post in category “News”

News

News concerning

the workshop

Category with Posts

SITE STRUCTUREWordpress Workshop site example

Team A starts at 12/11/12Post in category “News”

Tags: “announcement”, “schedule”

Video Lectures are now available!Post in category “News”

Tags: “lectures”, “video”

News

News concerning

the workshop

Category with Posts

ADD CONTENTWordpress Workshop site example

1ο workshop του τμήματος της Δευτέρ

ας

Καλησπέρα σε όλο

υς,

Ελπίζω να μην έχετε ξ

εχάσει ότι αύρ

ιο είναι το πρώτο

workshop!

Σας περιμένουμε ό

λους στις 3 στο εργαστήριο λειτου

ργικών (CS Lab) στο ισόγειο

του Κέντρου Δικτύω

ν (το κτήριο με τα κίτρινα

κάγκελα) δίπλα

στα Νέα Κτήρια Ηλεκτρ

ολόγων.

• Όσοι είστε σε

ομάδες, αρκεί ν

α φέρει ο ένας από τους δύο laptop.

• Όσοι δεν είστε α

πό το Πολυτεχνείο, μην φέρετε

laptop γιατί δεν θα έχετε in

ternet, μην ανησυχείτε όμ

ως, θα σας δώσουμε

σταθερούς υπολο

γιστές.

Καλό βράδυ,

Η ομάδα του CMS &  Online Marketing Club

2ο workshop του τμήματος την ΔευτέραςΚαλησπέρα σε όλους,Να σας ενημερώσουμε ότι την Δευτέρα 19/11 θα γίνει κανονικά το 2ο workshop του CMS & Online Marketing.

Ίδια ώρα, ίδιο μέρος (3-5 στο CSLab)Σας περιμένουμε όλους!

SELECT A THEMEWordpress Workshop site example

WP Themes

A WordPress Theme is “a collection of files that work together to produce a graphical interface with an underlying unifying design for a website.”

“A way to skin your website”

Or in other words...

What

Where to find them?

In all over the WEB!

Some great marketplaces

ThemeforestWoothemes

Wordpress Theme Directory

CSSigniter

Ok now what ?

Three Simple StepsUpload

ActivateConfigure Settings

Where they live

Server Side

Client SideActive Theme

Inactive - Installed Themes

Upload

1

2

3

Activate

Click to activate

Configure your settings

Nothing common for all

Examples

Let’s explain what you see

Header

Footer

Sidebar - WidgetsPosts

Navigation Menu

You just said what? “Widgets”

“Widget is a fancy word for tools or content that you can add, arrange, and remove from the sidebar(s) of your blog. Widgets make

it easy to customize the content of your sidebar(s).”

Definition

How & Where

Available Widgets Available Spaces

Inactive - Previously Used

Drag a widget

Result

Next Step -“Navigation Menu”

“Navigational menus are vital parts of your site’s design. They tell your site visitors where to go and how to access important

information or areas on your site. “

Some words...

Previously seen

Navigation Menu

Where

Items to add

Added Items

Final Part -“Plugins”

“A WordPress Plugin is a program, or a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to

your WordPress website”

Definition

That Plugins can make you a superhero.Plugins can modify your whole webpage and give unlimited new

features.

Don’t Forget!

Social Network!

E-Shop!

How to install

Search for one

Choose one and click install

All of your installed Plugins

After installation click to activate!

Done

Questions ?

Let’s do it

DOWNLOAD WORDPRESS FILESStep 1

UPLOAD WORDPRESS FILESStep 2

CREATE DATABASEStep 3

Database Name: k25806dimt_

Database Name: k25806dimt_

Database Name: k25806dimt_

Database Name: k25806dimt_

Database Name: k25806dimt_

Database Name: k25806dimt_

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345

START INSTALLATIONStep 4

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345Database Server : db7.papaki.gr

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345Database Server : db7.papaki.gr

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345Database Server : db7.papaki.gr

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345Database Server : db7.papaki.gr

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345Database Server : db7.papaki.gr

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345Database Server : db7.papaki.gr

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345Database Server : db7.papaki.gr

Database Name: k25806dimt_Database User Name: demo

Database User Password: 12345Database Server : db7.papaki.gr

Username: adminPassword: 12345

WHAT WE NEEDin order to build our website

WHAT WE NEEDin order to build our website

Download Wordpress

WHAT WE NEEDin order to build our website

Download Wordpress

Upload Wordpress files to server

WHAT WE NEEDin order to build our website

Download Wordpress

Upload Wordpress files to server

Create a database

WHAT WE NEEDin order to build our website

Download Wordpress

Upload Wordpress files to server

Create a database

Create our site!

Username: adminPassword: 12345

Username: adminPassword: 12345

Wordpress login page: yoursitename/wp-login.php

Username: adminPassword: 12345

Username: adminPassword: 12345