2
1. Site Requirements
2. Site Structure
3. Home Page
4. News Page
5. Projects Page
6. About Page
7. Contacts Page
Table of Contents

Site Requirements
Gathering Requirements & Prototyping

4
Site Prototype – Home Page
Home
Slider
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Footer
Who We Are? Latest News Latest Projects

5
Site Prototype – News Page
News
Footer
News Title
Featured
Image
More text, more text …
Some text
here …
News Title
… …
News Title
Featured
Image
Some text
here …
News Title
… …
News Title
Featured
Image
Some text
here …
News Title
… …

6
Site Prototype – Projects Page
Projects
Footer
Project #1
Icon
Short description …
Project #2
Project #3
Icon Icon

7
Site Prototype – Partners Page
Partners
Footer
Partner #1
Logo
Partner #2
Logo
Partner #3
Logo
Partner #4
Logo

8
Site Prototype – About Page
About
About Us
Some text … Some text … Some text … Some text … Some text … Some text … Some
text … Some text … Some text … Some text … Some text … Some text … Some …
Mission
Some text … Some text …
Initiatives
Some text … Some text …
Meet the Team
Photo Person Name
Some text
Photo Person Name
Some text
Photo Person Name
Some text

9
Site Prototype – Contacts Page
Contacts
Contacts Us
Address,
Phone number,
Facebook, …
Leave a Message
Map

10
Site Prototype – Project #1
Project #1
Footer
Project #1 – Free Training Content for Developers
Description of the project …
Icon

11
Project #2
Footer
Project #2 – Free Programming Courses for Beginners
Icon

12
Project #3
Footer
Project #3 – School Profession "Application Developer"
Icon

13
Project #4
Footer
Project #4 – Trainings for School Teachers
Icon

Creating the Site Structure
Typical Business Site Structure in WP

15
 Install a new WordPress instance
 In your hosting environment
 Use Softaculous from your cPanel
administration
 Or install a local WordPress
instance in XAMPP
 Create a new MySQL database
 Extract wordpress-4.8.1.zip in
XAMPP / htdocs / {site-name}
Install WordPress

16
 Purchase your own Web hosting
 Or register for a free Web hosting with cPanel from
https://profreehost.com
Web Hosting and cPanel

17
 Managing files and folders from cPanel
 Managing MySQL databases:
Using cPanel

18
Install WP using Softaculous

19
Configure Site Identity + Permalinks

20
 Choose, install and configure a WP theme
 Free theme  low budget, limited functionality
 Paid theme  higher budget, rich functionality
 How to choose a WP theme?
 Browse around and see the demos
 In our demo, we choose:
 "Sydney" a free WP theme
 https://athemes.com/theme/sydney/
Choose a WP Theme

21
 Install WP plugins that you will definitely use
 Elementor – the visual page builder
Install WP Plugins: Elementor

22
 Duplicate Page
 Duplicate posts and pages
 Create content faster
 Anywhere Elementor
 Create page templates
 For inserting in the
sidebar / footer widgets
 Using short-codes
Install More WP Plugins

23
 Create the site pages:
 Home
 News
 Projects
 Project #1, Project #2,
Project #3, Project #4
 About
 Partners
 Contacts
Create Site Pages

24
Duplicate Pages for Faster Creating

25
 Put some sample content
(pages and posts)
 Empty blog is hard to be
customized!
 Insert sample content in
all your pages
 Add some posts (news)
 Lorem Ipsum generator:
http://lipsum.com
Insert Sample Content

28
 Dark color theme (default in Sydney WP theme)
 Dark backgrounds in header + footer + slider (black / dark grey)
 Bright colors in header + footer + logo (white / orange / light grey)
 Light color scheme (custom colors in Sydney WP theme)
 Bright backgrounds / dark colors in header + footer + logo + slider
Decide on Color Theme

29
 Customize the theme logos
 Header: horizontal logo
 Transparent, height = 200px
 Site icon: square logo
 Transparent, 512px * 512px
 Customize theme colors
 Match the logo colors /
company colors
Site Logo and Colors

31
Customize Site Fonts and CSS
 Make the menu font larger
 The header in the slider has no
background  fix this with CSS

32
Customize Page Paddings & Menu Style

33
 Prepare slider images:
 Size 1920 x 1275
 Prefer own authored
photos / stock photos
 Add slides (images +
titles + subtitles)
 Customize the "call-to-
action" link + text
Home Page Slider

35
 Create a list of images
for the page headers
 You may crop images
from your site slider
Header Media Images

36
 Customize the sidebar and footer widgets
Sidebar and Footer Widgets

37
 Use "Anywhere Elementor" to create
 EA template for the "Contacts" footer (icons + headings + texts)
 EA template for the "Find Us" footer (social icons widget)
Create the Site Footer

38
 Icons
 location-arrow
 phone
 envelope
"Contact" Us AE Template

41
 Customize the global fonts and colors
in Elementor
Setup the "Elementor" Page Builder: Colors

42
 Add a spacer or top-margin for the section
 Add a 3-column layout
 About (heading + icon + text)
 Projects (heading + icon +
subheadings + texts + button)
 News (heading + post loop
widget)
The Home Page Layout

43
Home Page: "Who We Are" Column

44
Home Page: "Projects" Column

47
 Just customize the
Blog options
The "News" Page

48
 Make the headings
"orange" for all
non-Elementor
content
Styling the News

50
 Use a 3-column layout
Projects Page

52
Project "Open Training Content"

54
 Change page template
About Page

58
 Setup Contact Form 7
 Make Contact Form 7 Responsive
 Save the template from
"Contacts" EA Template
Prepare the "Contacts" Page
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7-form select {
width: 98%;}

59
 Insert the template into the "Contacts" page
Build the "Contacts" Page

60
 How to create a WordPress site?
1. Describe the site requirements and
create a prototype
2. Create the site structure: theme,
layouts, pages, menus, widgets
3. Build the pages: home page, news
page, projects pages, about page,
contacts page, etc.
Summary

?
https://softuni.bg/courses/wordpress-basics
Build a WordPress Site

License
 This course (slides, examples, demos, videos, homework, etc.)
is licensed under the "Creative Commons Attribution-
NonCommercial-ShareAlike 4.0 International" license
62

Free Trainings @ Software University
 Software University – High-Quality Education,
Profession and Job for Software Developers
 softuni.bg
 Software University Foundation
 softuni.org
 Software University @ Facebook
 facebook.com/SoftwareUniversity
 Software University Forums
 forum.softuni.bg

Creating WordPress Sites in 2 Hours

More Related Content

What's hot (9)

Similar to Creating WordPress Sites in 2 Hours (20)

More from Svetlin Nakov (20)

Recently uploaded (20)

Creating WordPress Sites in 2 Hours