1. Build a WordPress Site
A Real Life Example: Create a Fully Functional WP Business Web Site from Scratch
Building a WP Site
SoftUni Team
Technical Trainers
Software University

2. Table of Contents Site Requirements Site Structure Home Page News Page
Projects Page
About Page
Contacts Page
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

3. Have a Question?
sli.do #wp-softuni

4. Gathering Requirements & Prototyping
Site Requirements
Gathering Requirements & Prototyping

5. Site Requirements: The Process
Meet with the customer and collect requirements
List of functionalities (e.g. major pages, sections, etc.)
Shall you have multi-language support?
Shall you have non-standard functionality?
Design a prototype
A visual sketch of the main site pages / sections
Develop a visual design concept (logos, colors, fonts, …)
Collect site content (texts, images, etc.)

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

7. Site Prototype – News Page
Top Menu: [Home] [News] [Projects] [About] [Contacts]
News Title
News Title
News Title
Featured Image
Some text here …
Featured Image
Some text here …
Featured Image
Some text here …
More text, more text …
More text, more text …
More text, more text …
News Title
News Title
News Title … … … … … …
Footer

8. Site Prototype – Projects Page
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Project #1
Project #2
Project #3
Icon
Icon
Icon
Short description … Short description … Short description …
Short description … Short description … Short description …
Short description … Short description … Short description …
Footer

9. Site Prototype – Partners Page
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Partner #1
Partner #2
Partner #3
Partner #4
Logo
Logo
Logo
Logo
Short description … Short description … Short description …
Short description … Short description … Short description …
Short description … Short description … Short description …
Short description … Short description … Short description …
Footer

10. Site Prototype – About Page
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
Initiatives
Some text … Some text …
Some text … Some text …
Meet the Team
Photo
Person Name Some text
Photo
Person Name Some text
Photo
Person Name Some text

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

12. Site Prototype – Project #1
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Project #1 – Free Training Content for Developers
Description of the project …
Icon
Footer

13. Site Prototype – Project #2
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Project #2 – Free Programming Courses for Beginners
Description of the project …
Icon
Footer

14. Site Prototype – Project #3
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Project #3 – School Profession "Application Developer"
Description of the project …
Icon
Footer

15. Site Prototype – Project #4
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Project #4 – Trainings for School Teachers
Description of the project …
Icon
Footer

16. Creating the Site Structure
Typical Business Site Structure in WP

17. Install WordPress 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 zip in XAMPP / htdocs / {site-name}

18. Configure Site Identity + Permalinks

19. Choose a WP Theme 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

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

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

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

23. Duplicate Pages for Faster Creating

24. Insert Sample Content 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:

25. Sample Content: Posts

26. Create Top Menu

27. Decide on Color Theme 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

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

29. More Site Colors

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

31. Customize Page Paddings & Menu Style

32. Home Page Slider 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

33. Slider Texts: Add Shadow

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

35. Sidebar and Footer Widgets
Customize the sidebar and footer widgets

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

37. "Contact" Us AE Template
Icons
location-arrow
phone
envelope

38. "Social Icons" AE Template

39. Build the "Home" Page

40. Setup the "Elementor" Page Builder: Colors
Customize the global fonts and colors in Elementor

41. The Home Page Layout 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)

42. Home Page: "Who We Are" Column

43. Home Page: "Projects" Column

44. Home Page: "News" Column

45. Build the "News" Page

46. The "News" Page
Just customize the Blog options

47. Styling the News
Make the headings "orange" for all non-Elementor content

48. Build the Projects Page

49. Projects Page
Use a 3-column layout

50. Single Project Page

51. Project "Open Training Content"

52. Build the "About" Page

53. About Page
Change page template

54. Build the "Partners" Page

55. Partners Page

56. Build the "Contacts" Page

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

58. Build the "Contacts" Page
Insert the template into the "Contacts" page

59. From Your Local Laptop to Your Hosting
WP Site Migration
From Your Local Laptop to Your Hosting

60. Create a Subdomain in Your Hosting Account
Choose your main domain
Install WordPress via Softaculous

61. All-in-One WP Migration: Export
Install on your laptop the "All-in-One WP Migration" plugin
Export your local WP instance into file

62. All-in-One WP Migration: Import
Import local WP instance backup file to your new site
Update the "Permalinks"

63. Summary How to create a WordPress site?
Describe the site requirements and create a prototype
Create the site structure: theme, layouts, pages, menus, widgets
Build the pages: home page, news page, projects pages, about page, contacts page, etc.
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

64. Build a WordPress Site https://softuni.bg/courses/wordpress-basics
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

65. License
This course (slides, examples, demos, videos, homework, etc.) is licensed under the "Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International" license
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

66. Free Trainings @ Software University
Software University – High-Quality Education, Profession and Job for Software Developers
softuni.bg
Software University Foundation
softuni.org
Software Facebook
facebook.com/SoftwareUniversity
Software University Forums
forum.softuni.bg
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.