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

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

Have a Question? sli.do #wp-softuni

Gathering Requirements & Prototyping Site Requirements Gathering Requirements & Prototyping

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

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

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

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

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

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

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

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

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

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

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

Creating the Site Structure Typical Business Site Structure in WP

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

Configure Site Identity + Permalinks

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 https://athemes.com/theme/sydney/

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

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

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

Duplicate Pages for Faster Creating

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

Sample Content: Posts

Create Top Menu

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

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

More Site Colors

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

Customize Page Paddings & Menu Style

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

Slider Texts: Add Shadow

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

Sidebar and Footer Widgets Customize the sidebar and footer widgets

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)

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

"Social Icons" AE Template

Build the "Home" Page

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

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)

Home Page: "Who We Are" Column

Home Page: "Projects" Column

Home Page: "News" Column

Build the "News" Page

The "News" Page Just customize the Blog options

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

Build the Projects Page

Projects Page Use a 3-column layout

Single Project Page

Project "Open Training Content"

Build the "About" Page

About Page Change page template

Build the "Partners" Page

Partners Page

Build the "Contacts" Page

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="email"], .wpcf7-form textarea, .wpcf7-form select { width: 98%;}

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

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

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

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

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

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 – http://softuni.org This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

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

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 – http://softuni.org This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

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 © Software University Foundation – http://softuni.org This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.