Web Design Course Material
Web Design Course Material
A computer is a machine (mostly electronic) that is able to take information (input), and
process it to make new information (output).
PARTS OF A COMPUTER SYSTEM
1. Hardware
Monitor
Mouse
Keyboard
Joystick
Image scanner
Printer
Webcam
CPU
Hard disk
2. Software
Operating systems
System drivers
BIOS & UEFI
Firmware
COMMON USE OF THE COMPUTER SYSTEM
Word processing
Spreadsheets (Excel)
PowerPoint Presentations
Photo Editing (Photoshop, GIMP)
E-mail
Video editing/rendering/encoding
Audio recording
System Management
WHAT IS WEB DESIGN
Design is the process of collecting ideas, and aesthetically arranging and implementing them,
guided by certain principles for a specific purpose. Web design is a similar process of creation,
with the intention of presenting the content on electronic web pages, which the end-users can
access through the internet with the help of a web browser.
3. JAVA
Java is one of the most popular programming languages. It is used to develop website content,
games, apps, and software. Java is used in the production of most Android apps. Studies have
shown over 15 billion devices are using Java in some form or other. Java language is portable
and can be run on multiple software platforms.
4. JAVASCRIPT
JavaScript is used in many aspects of web development. Web developers use this language to
add interactive elements to their websites. User engagement is important to your business, and
your web developer should be incorporating JavaScript elements in your design.
5. PYTHON
Python is one of the easiest languages to use and work with. Python can create a framework for
basically any website need. This language uses simple and straightforward syntax, making it
easy for web developers to work with and explain to their users. Some familiar sites that are
using this language are Pinterest and Instagram.
6. SQL
SQL is a database query language that is used when your website is computing large amounts of
data. Using SQL allows you to gather data from different databases and use it to cater your
website to your target audience. This language is not used alone; instead, it is paired with
others to get the most out of your customer database and website development.
7. PHP
PHP is often used on data-heavy websites or for app development. This is an open-source
language that can be easily modified to meet the needs of your business or website. Large
websites like WordPress and Facebook use PHP to manage and process their data.
TYPES OF WEB DESIGNS PLATFORMS
1. Wix
2. Weebly
3. Webnode
4. Jimdo
5. Sprout Builder
6. Viviti
7. Synthasite
8. Wordpress
9. Joomla
10. Drupal
11. Magento
12. Squarespace
CMS (CONTENT MANAGEMENT SYSTEMS)
A content management system (CMS) is a software application or set of related programs that
are used to create and manage digital content. CMSes are typically used for enterprise content
management (ECM) and web content management (WCM). An ECM facilitates collaboration in
the workplace by integrating document management, digital asset management and records
retention functionalities, and providing end users with role-based access to the organization's
digital assets. A WCM facilitates collaborative authoring for websites. ECM software often
includes a WCM publishing functionality, but ECM webpages typically remain behind the
organization's firewall.
TYPES OF CMS
1. WordPress
2. Drupal
3. Joomla
4. Expression Engine
5. Text Pattern
6. Radiant
7. Cushy
8. Alfresco
9. SilverStripe
10. Kentico
USES OF THIS CMS
Personal websites
Business websites
Ecommerce websites
ECOMMERCE PLATFORMS
WordPress
Shopify
OpenCart
Magento
BigCommerce
3dCart
SquareSpace
Prestashop
Kibo
WEB HOSTING & DOMAIN
Web hosting is a service that allows organizations and individuals to post a website or web page
onto the Internet. A web host, or web hosting service provider, is a business that provides the
technologies and services needed for the website or webpage to be viewed in the Internet.
Websites are hosted, or stored, on special computers called servers. When Internet users want
to view your website, all they need to do is type your website address or domain into their
browser. Their computer will then connect to your server and your webpages will be delivered
to them through the browser.
features you should be expecting from your hosting provider:
Email Accounts: As mentioned earlier, most hosting providers require users to have their own
domain name. With a domain name (e.g. www.yourwebsite.com) and email account features
provided by your hosting company, you can create domain email accounts (e.g.
yourname@yourwebsite.com).
FTP Access: The use of FTP lets you upload files from your local computer to your web server. If
you build your website using your own HTML files, you can transfer the files from your
computer to the web server through FTP, allowing your website to be accessed through the
internet.
WordPress Support: WordPress is an online website creation tool. It is a powerful blogging and
website content management system, which is a convenient way to create and manage
website. WordPress powers over 25% of websites on the internet. Most hosting providers will
tell you right away if their plans are WordPress-compatible or not. The simple requirements for
hosting your WordPress websites include: PHP version 7 or greater; MySQL version 5.6 or
greater.
TYPES OF WEB HOSTING
1. Shared Hosting
Shared hosting means just that. Your website is hosted on a server shared by other websites.
The advantage of this setup is the shared cost. You can pay a little fee per month for sharing a
super server with (probably) hundreds (or thousands) of other websites.
The biggest disadvantage of a shared hosting account is that you're at the mercy of the other
sites on your server. A really popular site may adversely affect the performance of your own
site. On the other hand, if you're the most popular site on the server, you get to use a super
server for a very low price.
2. Reseller Hosting
Reseller hosting packages are basically a shared hosting account with extra tools to help you
resell hosting space.
Reseller packages come with greater technical control (often via the Web Host Manager (WHM)
control panel), billing software to help you invoice clients and other extra perks.
Some of those perks include:
free website templates
white label technical support -- that means the hosting company handles your clients'
tech support issues
private name servers -- make your company seem even bigger by telling your clients to
point their domain name servers to ns1.yourwebdesignfirm.com
TYPES OF DOMAINS
TLD - Top Level Domains
ccTLD - country code Top Level Domains e.g. .au, .en, .ng
gTLD - generic Top Level Domain: The best known generic TLD's
include .com, .net, .biz, .org and .info - these can be registered by anyone, anywhere in
the world.
IDN ccTLD - internationalised country code top-level domains: A top-level name with a
specially encoded format that allows it to be displayed in a non-Latin character set (i.e.
special characters).
PLUGINS & SECURITY
(SEO) Search Engine Optimization
Search engine optimization (SEO) is the practice of increasing the quantity and quality of traffic
to your website through organic search engine results.
SSL Certificate
SSL Certificates are small data files that digitally bind a cryptographic key to an organization’s
details. When installed on a web server, it activates the padlock and the https protocol and
allows secure connections from a web server to a browser. Typically, SSL is used to secure
credit card transactions, data transfer and logins, and more recently is becoming the norm
when securing browsing of social media sites.
SSL Certificates bind together:
A domain name, server name or hostname.
An organizational identity (i.e. company name) and location.
SSL certificates are issued to websites by a trusted third party known as a 'Certificate Authority'
(CA) and are available in a variety of types and validation levels:
Certificate Validation Levels
Extended Validation Certificates:
EV certificates provide the highest levels of security, trust and customer conversion for online
businesses. EV certificates are issued only after the issuing CA has conducted rigorous
background checks on the company according to the guidelines laid out by the Certificate
Authority/Browser (CA/B) Forum. Because of this, EV certificates contain a unique differentiator
designed to clearly communicate the trustworthiness of the website to its visitors. Whenever
somebody visits a website that uses an EV certificate, the address bar will turn green in major
browsers such as Internet Explorer, Firefox and Chrome. EV certificates are used by all major
online retailers and banks and are highly recommended for businesses that wish to
immediately build customer trust in their site.
Examples: Comodo EV SSL Certificate, Comodo EV Multi-Domain Certificate
Organization Validated Certificates:
OV certificates include full business and company validation from a certificate authority using
their established and accepted manual vetting processes. Each OV certificate contains full
company name and address details, which means they provide significantly higher levels of
assurance to end-users than Domain Validated certificates. However, because they are not
validated to the CA/B forum standards, they do not possess the ability to turn the browser
address bar green.
Examples: Instant SSL, Premium SSL Wildcard, Comodo Multi-Domain Certificate
Domain Validated Certificates:
DV certificates provide the same high levels of data encryption as the other validation levels but
do not provide assurance about the identity of the business behind the website. Whereas EV
and OV certificates are only issued after the applicant organization has been manually vetted by
a certificate authority, DV certs are issued after domain control has been established using an
automated, online process. DV certs are a popular choice amongst small-medium sized web
sites because of their faster issuance times and lower price points.
Example: Essential SSL
Certificate Types
Single Domain Certificates:
A single domain certificate allows a customer to secure one Fully Qualified Domain Name on a
single certificate. For example, a certificate purchased for www.domain.com will allow
customers to secure any and all pages on www.domain.com/. Single domain certificates are
available in DV, OV and EV variants at a variety of price points and warranty levels. The
straightforward nature of the single domain certificate makes it ideal for small to medium sized
businesses managing a limited number of websites. However, businesses that operate or
anticipate operating multiple websites may benefit from the added flexibility, convenience and
savings offered by wildcard or multi-domain certificates.
Examples: Instant SSL, Instant SSL Pro, Instant SSL Premium
Wildcard SSL Certificate:
A Wildcard certificates allows businesses to secure a single domain and unlimited sub-domains
of that domain. For example, a wildcard certificate for '*.domain.com' could also be used to
secure 'payments.domain.com', 'login.domain.com, 'anything-else.domain.com' etc. A wildcard
certificate will automatically secure any sub-domains that a business adds in the future. They
also help simplify management processes by reducing the number of certificates that need to
be tracked. For growing online businesses, Wildcard certificates provide a flexible, cost effective
alternative to multiple single certificate purchases
Example: Comodo Premium SSL Wildcard
Foreign
Stripe
Amazon
Adyen
Paypal
Skrill
LiveChat
LiveChat is an offline customer service software with live support, help desk software, and web
analytics capabilities.
GETTING TO KNOW WORDPRESS
WordPress is a free and open-source content management system (CMS) based on PHP and
MySQL. Features include a plugin architecture and a template system. It is most associated with
blogging, but supports other types of web content including more traditional mailing lists and
forums, media galleries, and online stores.
WordPress.com vs WordPress.org – What’s the Difference?
WordPress.com is not the same as the software and it isn’t even the owner. Instead, the
platform is a hosting service.
WordPress.org, on the other hand, is the home of that software. The site is managed by the
non-profit WordPress Foundation.
Installing and running WordPress
WordPress can be installed either locally after downloading the zip file from wordpress.org and
upload into the host server or from the host server cpanel by simply logging into your hosting
account and then on your cpanel dashboard and one-click install of wordpress.
WordPress Dashboard
The Dashboard (wp-admin) is the first screen you see when you log into the administration area
of your blog.
The Dashboard contains the following modules:
Dashboard Menu
The WordPress Dashboard provides navigation menu that contains some menu options such as
posts, media library, pages, comments, appearance options, plugins, users, tools and settings
on the left side.
Screen Options
The dashboard contains different types of widgets which can be shown or hidden on some
screens. It contains check boxes to show or hide screen options and also allows us to customize
sections on the admin screen.
Welcome
It includes the Customize Your Site button which allows customizing your WordPress theme.
The center column provides some of the useful links such as creating a blog post, creating a
page and view the front end of your website. Last column contains links to widgets, menus,
settings related to comments and also a link to the First Steps with WordPress page in the
WordPress codex.
Quick Draft
The Quick Draft is a mini post editor which allows writing, saving and publishing a post from
admin dashboard. It includes the title for the draft, some notes about the draft and save it as a
Draft.
Quick Draft is a mini-post editor that allows instant content creation from the Dashboard. You
can include a title and body text in the post, and save it as a Draft. For additional options such
as adding categories or setting a future publish date, you should use the Add New Post screen.
Below displays links to your most recent drafts, allowing one-click access from the Dashboard. If
you click on any one of them, you will be taken directly to edit that post.
WordPress News
The WordPress News widget displays the latest news such as latest software version, updates,
alerts, news regarding the software etc. from the official WordPress blog.
Activity
The Activity widget includes latest comments on your blog, recent posts and recently published
posts. It allows you to approve, disapprove, reply, edit, or delete a comment. It also allows you
to move a comment to spam.
At a Glance
This section gives an overview of your blog's posts, number of published posts and pages, and
number of comments. When you click on these links, you will be taken to the respective screen.
It displays the current version of running WordPress along with the currently running theme on
the site.
Stats
The Stats module is a favorite of many users. It’ll show you a graph of your blog’s traffic as well
as links to some popular areas of your blog. The graph works just like the graphs on the Site
Stats screens, so you can click a point to see more information about that day’s traffic.
CREATING POSTS
Understanding posts
A post is a content item stored in the wp_posts table. Each has a post type assigned to it, which
could be post, page or something else.
Post is a post type, used for blog posts or news items depending on the type of site you're
developing.
WordPress comes with five post types built in:
Post
Page
Attachment
Revision
Navigation Menu Item
Understanding the Default Post Types
Let's have a quick look at each of the built-in post types, how they're similar to each other and
how they differ. Note that in the table below, I use the term post in the generic sense to
describe content of all post types.
Post Type Used For Notes
Post Blog posts or Core post type - listed on main blog page
similar
Page Static pages Designed to be displayed singly - not generally
used in archives (although they can be). Pages can
have parents, which are defined using the
post_parent field in the record for the child page.
Each page can have multiple children but only one
parent.
Attachment Documents and Media uploaded to a post will have the ID of that
images (which post in its post_parent field. Images uploaded via
may or may not the Media screen in the dashboard will have that
be attached to a field blank. The guide field is used to store the url
post) of the media file.
Revision Individual Each revision is attached to a post: the ID of that
revisions to each post will be stored in the revision's post_parent
post field.
Navigation Menu Individual Each menu will contain a number of navigation
Items navigation menu items, each of which is stored as a post. The
items menu_order field is used to store information
about the order of navigation menu items, and
additional data such as the target and parent
menu item are stored as records in the
wp_postmeta table.
From the moment you opened images from your computer or dragged them to the dashed box,
WordPress will start uploading the files. Depending on the speed of your internet connection,
your hosting provider and the size of files, it may take you up to a few minutes on average until
WordPress finishes the upload process. Every file will get its personal progress bar so you can
know how fast (or slow) that particular file is uploading.
By default, WordPress allows you to upload multiple media files at once. Just in case this
doesn’t work for you, you can always switch back to a simpler Browser Uploader. It will work
even on older computers, but it will allow you to upload only one media file at the time.
Media Library
After uploading at least one file, the changes will be visible in the WordPress Media Library. To
open it, please navigate to Media -> Library.
This new page will show you a list of all media files that you’ve uploaded to WordPress. You can
show files in a list or grid view. If you want to filter specific file types, choose only images,
videos, audio or unattached files (files that don’t belong to any post or page). You can also
display images from specific months and years. If you want to delete more than just one image,
click the “Bulk select” button, choose images, and click the “Delete Selected” button.
On the right side of Media Library, you will find a simple search box which allows you to find an
image in the library. Although it may seem unnecessary at the moment, this feature will be very
helpful once you accumulate hundreds and thousands of files in the library.
Upload and insert images directly to your post
As you will probably spend the most of your time writing new posts, it is good to know that you
can add images and other media files directly from the post editing screen. By controlling media
files from here, you even get a few extra options, so let’s see them.
By clicking the “Add Media” button on top of the post edit screen, a new pop-up window will
appear. Basically, the WordPress Media Library is the same – you can upload files directly from
your computer or select images already uploaded to the library.
1. Place the cursor where you want the image to appear in the article
2. Click the “Add Media” button on top of the screen
3. Upload or select a picture from the Media Library tab
4. Edit the image and its details if necessary
5. Click on “Insert into post” button
Although the screen looks pretty much the same as the one you open through WordPress
admin menu, you can notice that the left side has a few extra links. Besides inserting images,
you can create a gallery, select a featured image for that post or insert an image from URL.
Create a gallery
By setting up a gallery, you can select multiple images and add them into your post. WordPress
will then create a collage of the chosen images and display them within the post. If you are
using the visual editor, you will see all the grouped images, and you can click on them. If you do
so, two new icons will appear which will allow you to edit and remove the gallery.
If you switch to the Text editor, you will notice a [gallery] shortcode in the same place. As from
WordPress version 3.5, the gallery shortcode can be extended with numerous parameters so
you can modify it manually. Since working with the parameters requires some understanding of
how shortcodes work, we will skip that for now. But if you want to know more about the
feature, please see more about it on the official WordPress Codex pages.
Featured image
A featured image represents the contents, mood, or theme of a post or page. Posts and pages
can have a single featured image, which many themes and tools can use to enhance the
presentation of your site.
Select an image that will represent your post. Depending on the theme you are currently using,
this picture may appear in different places as your post’s thumbnail. It also frequently appears
above the post on the single-post page. But, again, it really heavily depends on the theme.
Insert from URL
If you have a picture located on another server and you can’t or don’t want to upload it to your
WordPress site, you can insert one from URL. You will need the absolute path (the complete
link address) to that image. For
example https://firstsiteguide.com/wp-content/uploads/2017/05/wordpress-media-library.jpg.
As soon as you paste the URL, there will be a preview of the image. You can also edit a few
details before inserting it into the post.
Before adding images from an URL, make sure that you have permission to do so. Many
photos are copyright protected, and using them without permission will mean that you’re
stealing those image.
Different image sizes
When you try to add images to a post or page, you will notice that WordPress lets you choose
its dimensions. By default, WordPress creates three additional sizes next to the original one. So,
even if you upload an HD image, for example, WordPress will automatically make it available in
these three resolutions if you are using the Twenty Seventeen theme:
Thumbnail – 150×150 pixels
Medium – 300×188 pixels
Large – 525×328
Please note that this size may depend on the theme that you use. Also, you can select your own
dimension if you navigate to Settings -> Media from the WordPress dashboard menu.
How to edit image details
Before we get to the part where you can crop, resize and edit images, let’s see how to modify
some details. This will help you organize files on your site, and it will be beneficial to your visitor
and search engines to have all the extra data about files on your site.
1. Select any image from the library
2. A popup window will appear and show you the details about that image
3. On the right side, you will find information like image name, file type, upload date, file
size and dimensions
4. Below that you can see the URL of your picture
5. To edit the image, change its title, caption, alt text (shown to those users who can’t
open the photo), and description
6. Just below the description field, you can see which user uploaded this particular media
file
7. To edit more details, click the “Edit more details” link at the bottom
How to edit an image
WordPress developers were kind enough to introduce a feature that lets you modify images
that are already uploaded to WordPress Media Library. To do some extra work on the picture,
just select one from the Media Library list and click the “Edit Image” button below it.
Now you can crop, rotate and flip the image without having to upload it once again. There are
also undo and redo buttons that will let you fix mistakes done while editing. This tool is
obviously not a replacement for Photoshop but it does wonders for small, fast fixes.
Rotate
To rotate the image, you selected, click the button to turn it to left or right.
Scale
On the right side, you can enter new dimensions for your image. As you enter width or height,
WordPress will automatically calculate the other dimension so that your image keeps its aspect
ratio (you don’t want it to be distorted). If you try to scale up an image, you will see a little red
exclamation mark next to which will indicate that scaling up isn’t possible.
You can only scale down images in WordPress
Crop
To crop the image, click on it and drag to make your selection. By holding down the Shift key
while making a selection, you can keep the aspect ratio. If you want to modify it, change the
aspect ratio from the right side of the screen. For example, use 1:1 ratio to make a square
selection or change it to 4:3, 16:9 or anything else that you want. Once you have made your
selection, you can quickly adjust it by choosing the size in pixels. The minimum range size is the
thumbnail size as set in the Media settings.
Apply changes
The last option allows you to apply changes to all images sizes, just the thumbnail or everything
but the thumbnail. For example, you can have a square thumbnail that displays just a section of
the original image.
Attachment pages
From the moment you upload a new file, WordPress creates a new attachment page for it. You
can access this page by opening any image and clicking “View attachment page” from the right
side options panel.
MANAGING CONTENTS
Post Types
A post is a post is a post, right? Not quite. Technically, pretty much everything in the WordPress
database is a post. Then posts are categorized as types of posts. For example, a WordPress Page
is really a WordPress post assigned the post type of “page”. Additional built-in post types
include menus, media attachments, and, yes, posts. So posts assigned the type of post are “blog
posts” as we know them.
Additionally, custom post types (CPTs) can be created. So there’s essentially an unlimited
number of types of posts. Sometimes a slider plugin will create its own post type. A directory or
classifieds plugin will most likely create its own post type. Some themes include their own
custom post types.
Pages
WordPress Pages (posts of the “page” post type) are best for static content, like About Us,
Contact, and Pricing pages. “Static” doesn’t mean it can never change. Instead, static content is
content that is “less time-dependent than Posts” (per the Codex).
Pages are organized in a hierarchical fashion. That is, they can have child pages.
Pages can also be used to present a “best of” collection of posts (i.e. blog posts), which go
nicely when used with another benefit of Pages over Posts: Page Templates.
You can think of pages, child pages, and collections of posts as manual or automatic Tables of
Contents. It’s all up to you.
My favorite plugin for quickly displaying many pages/posts within a single page is Page-list.
However, I recently found Super Post, which seems like a full-featured alternative.
Posts
WordPress Posts (posts of the “post” post type) are what WordPress was originally created for
— blogging.
A site’s posts make up its blog. What you’re reading right now is a WordPress post, not a page.
It’s written as of the date published and may decrease in value over time, since it’s typically
time-dependent. Said better, it’s time-relevant or time-sensitive. For example, WordPress may
add an additional default post type a year from now and then this post would be slightly
inaccurate/outdated for not mentioning it. Well, since this post is published in early 2013, its
content is (supposed to be) understood that it was accurate as of that time period and possibly
less accurate as time goes on.
If you’re like me and wish your content never went out of style and magically stayed updated,
you’ll just have to keep wishing. However, maybe if you think of things this way, you won’t feel
so bad for posting and not updating: Think of posts as newspaper articles.
Another way to think about posts is as your publicly-accessible journal. Share your thoughts,
wishes, activities, and news — yes, for both personal and commercial blogs. Just understand
that most of your posts won’t be long-lived. For example, your post about next week’s
fundraiser is mostly pointless after the event ends. But that doesn’t mean you shouldn’t have
posted the announcement on your blog, and it doesn’t mean you should delete or unpublish it
after the event. You can also post photos and accomplishments in a post the week after. And a
few months later, your site visitors can see your announcement post, the “day of” post, the
summary post (with photos, please), and even a post looking forward to the next fundraising
event.
All in all, posts are typically time-dependent chunks of content that typically relate to other
posts (like the 4 possible posts above), which can be categorized and formatted, as we’ll discuss
in the Taxonomies section below.
Custom Post Types
A custom post type is just that — custom. A CPT can be page-like or post-like in its usage. Or it
can be used solely for bundling content in a theme or plugin scenario, not actually displayed
individually on the front-end
Custom post types solve the problem of completely separate types of content — stuff that
shouldn’t be a single page and shouldn’t be included in the site’s blog posts. Examples include
product listings, real estate listings, movie/music database, testimonials/quotes, or portfolio
items.
Organizing Posts / Taxonomies
Once you figure out the post types your WordPress site will use, you’ll want to group similar
items together. WordPress includes Categories and Tags by default for the Posts post type.
These organization tools are known as Taxonomies regardless of the post type they’re applied
to.
Categories
“Categories tend to be pre-defined and broad ranging” (Codex). For example, if you write about
social media, you’ll want to have categories like Growing Your Reach, Increasing Your
Conversions, Security Tips, and Tools to Use.
Depending on your Permalink settings, the Security Tips category would create a dynamic
“page” (dynamic display of content, not a WordPress Page post type) at
example.com/category/security-tips, at which all posts in the Security Tips category would be
displayed in descending chronological order.
Like pages, categories are hierarchical. You could have a child category of Analytics under the
Increasing Your Conversions parent category. If someone visits your
example.com/category/increasing-your-conversions dynamic page, posts added to the
Analytics child category will also be displayed, but viewing example.com/category/increasing-
your-conversions/analytics won’t display posts other than those explicitly added to the
Analytics child category
Try to keep categories “big picture” and to not have a category with less than 3 posts in it
(unless your blog is brand new of course).
Tags
Tags are similar to categories in that they’re also a taxonomy. However, they’re non-
hierarchical. In other words, like posts, there are no parent and child tags, and you can have as
many as is appropriate for your subject matter. For the social media website example, we might
have tags like Facebook, Twitter, and Google Plus.
A single post can be “tagged” with one or many tags. There could be 50 posts and 30 of the 50
are tagged with Facebook, 42 of the 50 tagged with Twitter, and 5 of the 50 tagged with Google
Plus. WordPress can then dynamically display related posts at example.com/tag/facebook and
example.com/tag/twitter, both of which would display the same post “A Smarter Way to Share”
discussing BufferApp.com. And that single post might also be in the category of Increasing Your
Conversions (dynamically generated at example.com/category/increasing-your-conversions).
Custom Taxonomies
Hopefully you now understand the basic ways to publish and organize your WordPress posts
with the default Categories and Tags taxonomies, assigned to the Posts post type. But what
about when you use custom post types? Should you really create a Testimonials post type and
tag it with Facebook or put it in the Analytics category? Probably not.
Custom taxonomies are great for organizing custom post types. Custom post types are great for
publishing similar items, as discussed above. If you have a custom movie database, your custom
post type would be Movies. You could then have custom taxonomies — hierarchical or not, like
categories or like tags, respectively — for things like the movie rating (G, PG, PG-13, R), genre,
production studios, etc.
Thinking about a database of computers (e.g. a Computers post type), you could have a
hierarchical taxonomy (like Categories) of Device Type, with items including Desktop, Laptop,
and Tablet. And a non-hierarchical taxonomy (like Tags) could be Manufacturer, with items
including Acer, Apple, Dell, HP, Sony, and Toshiba.
If we want to post about a MacBook, we would click “Add New Computer” and assign it to
Device Type -> Laptop and to Manufacturer -> Apple. Then, we could find this MacBook post
within at least these 2 URLs: example.com/device-type/laptop and
example.com/manufacturer/apple. Notice no “category” or “tag” in the URL.
You can see the power of custom post types, custom taxonomies, and how they can fit nicely
alongside WordPress’ default Pages and Posts post types. With the help of a custom post type
generator or a CPT plugin like Types (link above), creating and managing custom post types is
quick and easy even for non-techies.
Custom Fields
Custom fields are neither post types nor taxonomies. Instead, they contain data about a post,
which is why they’re called “post meta” or “metadata” (i.e. data about data). A custom field for
a Computer post could be serial number, price, or warranty length.
WordPress by default provides a way to add custom fields and insert values for existing fields,
unlike custom post types and custom taxonomies.
Author Archives
WordPress creates an author page for every WordPress user (regardless of roles and
capabilities) at example.com/author/username. For example, user John Smith with username
mrjohn will have all his posts accessible at example.com/author/mrjohn, even if he’s not an
author. If there is no username of mrjohn, WordPress will display a 404 error instead of a
message like “No Posts for John Smith.”
Author pages can be a neat way to highlight an individual’s contributions to the blog and,
depending on your theme, can display a bio and links to their own social media profiles. Check
out my ManageWP Author Page as an example.
Dynamically Created Pages
As you’ve no doubt noticed by now, WordPress displays similar posts together in dynamically-
generated pages. These pages are called Archives or Archive Pages or Archive Indexes.
Dynamically generating pages with like-kind content is one of the main benefits of using any
content management system. Author pages are actually archives just like category and tag
archives. I described those archives before this section so that you’d get the hang of “archives”
if you’re brand new to WordPress.
In summary, WordPress has a lot of ways to display content dynamically. Some WordPress
themes have distinct styling for every scenario, like category archives looking substantially
different from tag archives, for whatever reason. If not, the archive for categories and tags
would look the same but display different content.
The WordPress Blog Page
By default, a WordPress site’s home page is a “blog” front page. If desired, you can create 2 or
more new pages (probably titled Home and Blog) and then go to WordPress’ Reading Settings
and setup a static front page and a dedicated blog page.
Whether you choose to have your front page as a static page or as the default “blog posts”
front page, your blog page will display a list of your most recent posts in reverse chronological
order. Your WordPress Reading Settings allow you to control a few display options, like the
number of posts to show and whether to show the full text or a summary/excerpt.
Sticky Posts
Sticky Posts (sometimes called Featured Posts) override the reverse chronological order of the
blog page and stay at the top of the blog.
For example, if there are 5 posts dated January 7, February 3, March 10, March 20, and April 17,
they would be displayed in the order of 5, 4, 3, 2, 1. But if we made February’s post sticky (post
#2), the blog posts page would display them in this order: 2, 5, 4, 3, 1.
Note: Custom post types don’t support “stickiness”, although some plugins may enable this
feature.
Post Formats
Post Formats is a theme feature. It’s a way to display content of similar types, but notice it’s not
mentioned in the Template Hierarchy Chart above. There are quite a few built-in post formats
(explanations of each at the included link):
aside – a post typically styled to not display the post title, like Facebook status updates
audio – an audio file
chat – a chat transcript
gallery – images
image – a single image
link – a link to another site
quote – a quotation
status – a short status update, like a Twitter Tweet
video – a single video
CUSTOMIZNG THE SITE
This part is probably the main thing on your agenda when it comes to launching a WordPress site that
fits your needs 100%.
To begin, just click the “Add new image” button. This works just like the standard WordPress
uploader for media, nothing fancy.
There is a small caveat, though. You’ll notice that WordPress suggests certain image dimensions
for the header image:
Depending on your theme, those numbers will vary. Now, the caveat is not to pay attention to
that at all.
Yep, you’re reading this right.
What you actually do is always try to pick a high-quality, high-resolution image, and then scale
it down afterward using WordPress’ own tools.
For example, I went with a nice image that’s 1920×1080 – more than the recommended
dimensions. After uploading it, I just click “Select and Crop”:
At this point, WordPress provides me with its own set of tools for making sure that my image
fits the theme’s space limitations:
And just like that, I have a header image:
Two things you’re going to do here: (a) set the logo, (b) set the site icon.
Starting with the logo. First off, setting aside all the marketing and branding qualities of your
logo, from a purely technical point of view, a good logo should be saved as a transparent PNG
file (without a background). Once you have such an image, just upload it by clicking on “Select
logo”. You will again get to use WordPress’ tools for cropping and adjusting the final image.
Here’s my result:
The next step is setting the site icon, also known as Favicon. Traditionally, the best idea is to
take your logo, remove any text from it, and then set it as the site icon. This works well because
site icons occupy very little space in the visitor’s browser bar, so the simpler they are, the more
readable they will be.
To upload your site icon, just click on “Select Image” in the Site Icon section of the sidebar.
Once done, you’ll see something like this, along with the preview of the icon:
Don’t know how to create a Favicon? Use those favicon generators instead.
5. Adjust the colors
Some WordPress themes let you customize the default colors used for things like the website
background, links, main texts, secondary texts, and more, depending on the specific theme.
You can do this all in the “Colors” section of the Customizer:
Apart from that, you can also choose from some pre-defined color schemes – visible in the
image below.
I encourage you to experiment with this and select colors that go along with your business
identity and branding.
6. Set a custom background
At this stage, most WordPress themes support customizable backgrounds, which includes not
only setting the colors – as mentioned in the previous point – but also custom background
images.
This is done in Customizer’s “Background Image” section.
Once you pick up a background image from your hard drive, you’ll see this:
Some important details:
Background Repeat – this defines what happens when the visitor scrolls down the page
and eventually runs out of your background image.
Background Position – self-explanatory, but switch between them to see the difference.
Background Attachment – Scroll means that the image will scroll along with the rest of
the site content. Fixed means that the image will always stay in one place.
7. Additional theme-based customizations
Since there are thousands of themes available out there, and many of them add their own
blocks to the Customizer, covering all imaginable possibilities in this guide is simply impossible.
So at this point, we just want to encourage you to browse through all the Customizer sections
available in your current theme and experiment with what you find there.
To give you an example, there are many additional Customizer sections you can come across in
some of the more feature-rich themes:
8. Plugins to use for theme customization
Here’s a list of other useful theme customizations you can enable by installing some interesting
plugins:
Page Builder by SiteOrigin. Great for adding entirely custom content elements and
custom layouts to your pages and posts. One of our favorite plugins.
NextGEN Gallery. Create and showcase great-looking image galleries.
Content Views. Nice plugin if you want to display your blog posts as a grid, rather than
the standard WordPress list.
Unique Headers. Create original headers for individual posts and pages.
Shortcodes Ultimate. Add custom content blocks to your website content (such as
buttons, lightboxes, lists, tooltips, and more).
Portfolio. Use it to showcase your work/projects. Great for business websites.
Related Posts. A very nice way to display links to related content right below your posts.
Custom Sidebars. Create unique and customized widget areas throughout your posts
and pages – more than what’s available in WordPress by default.
Easy Google Fonts. Truly awesome plugin if your current theme doesn’t allow you to
change the default typography.
Strong Testimonials. A cool plugin to have if you’re running your WordPress site for a
business purpose and you’d like to showcase testimonials from your clients.
Simple Custom CSS. Last but not least, a really useful plugin if you want to get into some
more advanced customizations involving tweaks to the CSS styling of your site.
3. Set up “Menu” and “Widgets”
We don’t think that there are many websites out there that don’t have any menus at all. Maybe
those small, business-card-like one-pagers, but that’s really not the effect we’re going for in this
guide.
You need the menus!
Here’s how to work with menus in WordPress:
Go to your wp-admin / Menus. This is where everything takes place. Begin by checking the
individual pages that you want to have on the menu, and then click “Add to Menu”:
At this point, you will see your new pages on the right-hand side. The cool thing is that if you
want to rearrange the pages, everything works with drag-and-drop. But the main thing to do
here is to assign the menu to one of the available locations and save it.
Now you have your new menu created and assigned to the main menu area.
For more variety, you can also create separate menus for your social media profiles, or anything
else that makes sense. WordPress doesn’t limit you in any way.
But where to display all those additional menus? This is where widgets come into play.
All WordPress themes come with at least one widget area, usually more. Widget areas define
the specific spaces within your theme design where you are allowed to display custom blocks of
content.
You can see this by going to wp-admin / Appearance / Widgets. There are available widgets on
the left, and widget areas on the right. What you do is quite simple – just grab a block from the
left and drag and drop it somewhere on the right.
Really cool stuff, and easy to use. Following this path, you can, for instance, take all of your
additional menus and display them as widgets.
But widgets go actually way deeper. I highly encourage you to check out the widgets you
currently have available (depends on your theme and plugins), and see what cool stuff you can
place throughout your site design to make it more interesting to the readers.
4. Confirm that Your Website is “Mobile-Friendly”
Making sure that your website is optimized for mobile viewers is more important than making
sure that it’s optimized for desktop.
It’s not that we wholeheartedly believe in the principle itself, but we do believe in the raw data.
It just so happens that mobile traffic is now bigger than desktop traffic (data is confirmed). This
means that by not having a mobile-optimized site, you’re potentially losing website traffic.
How to achieve mobile optimization?
First, you need to check if your current design is mobile-friendly. There are a couple of ways to
do that:
1. Go to automated tests.
Two popular solutions include:
Mobile-Friendly Test by Google
Mobile Friendliness Test Tool by Bing
There’s no inferior tool among these two. It’s a good idea to use both, and see what they have
to say about your site.
Simply go to either of the above, enter your website URL, and wait for the results. Takes only a
minute.
If you’re lucky, both Google and Bing will say that your site is optimized. That’s good. You can
stop reading this section of the guide.
If not, you will be given some suggestions and tips on what you can do to improve the situation.
We’re not going to go through that here, since every website scenario is different, and anything
I’d share here wouldn’t be applicable in most cases. In short, just follow the tips given by
Google and Bing.
Note that it’s worth to check not only the main URL of your website – the homepage – but also
a small set of subpages, particularly:
your blog listing,
example single blog post,
example single page,
any custom landing page you have.
2. Do manual tests.
You can carry out the manual tests yourself. They are more about your own subjective
impression of the site’s mobile-friendliness, rather than data-based calculations.
To begin, go to the WordPress Customizer. Take a look at the bottom left corner:
Those buttons allow you to switch between common device sizes, so you can see how the site
behaves. It’s a very handy tool, and it lets you see if everything is in order. Make sure that:
all texts are readable,
images aren’t too big or too small,
ideally, there should be no horizontal scrollbars,
the balance between image size and text size is correct (so one is not overpowered by
the other),
the menus work properly (sometimes it’s an issue with the design on the mobile).
Apart from WordPress’ own tool, you can also use the options available in the Chrome browser.
Go to the main menu and access the “Developer tools”, or just press Ctrl+Shift+i on your
keyboard (Win).
Then you can click the “Toggle device toolbar” button:
You will be able to alternate the viewing mode between specific popular devices. For instance,
you can view your site like it appears on the iPhone 6 Plus, iPhone 5, Nexus 5X, and more.
I encourage you to use both Chrome and WordPress’ tools to really examine how your site
behaves, and check if everything is in order.
3. Fix things
If your current theme doesn’t pass the mobile-friendliness test, unfortunately, there’s not much
you can do without getting your hands dirty and going through a lot of source code.
In an extreme scenario, you might have to pick another WordPress theme. After all, if a theme
is not mobile-friendly approaching 2017, it doesn’t look good for its reputation.
Don’t panic! You can still experiment with the following. There are two alternative paths you
can take if you don’t want to change your theme:
(a) Experiment with “tune-up” plugins:
Easy Google Fonts – This one I already mentioned earlier. You can use it to change your
typography settings in order to make texts more readable on mobile.
Responsive Menu – Helps you fix your menus and make them mobile-friendly.
Adaptive Images for WordPress – Helps you load your images more effectively on
mobile.
(b) Get a mobile plugin:
There’s a plugin called WPtouch. Once enabled, it checks every visitor coming to your site, and
if they’re on mobile, it displays them a separate, alternative version of your site design.
Be aware that it takes over the appearance of your site on mobile completely, so your visitor no
longer sees your current WordPress theme.
If you don’t want to change your main theme, and your site is still not mobile friendly, then the
WPtouch plugin is probably the best solution.
5. Set Up Your Homepage
For a long time, WordPress has neglected the whole idea of homepages altogether. Your only
options were to either have the default blog listing as your homepage or to take one of your
standard pages and assign it as the homepage.
These days we have a lot of options. Some of them coming from “team themes”, others from
“team plugins”.
Let’s deal with themes first.
Depending on the theme you’re currently using, you might have some custom homepage
options available. Example of a popular free theme:
All of those sections marked here take care of customizing a specific part of the homepage.
Again, those options are different from theme to theme, so we won’t get into them. You should
still closely examine what’s available in your current theme.
In a nutshell, if the theme offers any homepage customizations, use them as widely as you can.
If not, there’s a workaround.
Start by creating two new pages:
call the first one HOME; leave it blank (no content); publish that page,
call another one BLOG; also leave it blank and publish.
Then go to your wp-admin / Settings / Reading. There, assign HOME as the “Front page” and
BLOG as the “Posts page”:
At this point, when you go to your main domain, you’ll see a blank page.
That’s where plugins come into play. If you want to keep things free and on a budget, there are
two options:
the previously mentioned Page Builder by SiteOrigin,
and Live Composer.
Once you install and activate the first one, when you go back to edit your new HOME page,
you’ll see a new tab:
When you click it, you’ll go to the SiteOrigin builder. This is where you can set custom layouts
and content elements on your homepage.
Some example content blocks you can use (just a small portion of what’s available):
We’re sending you over to SiteOrigin’s documentation and examples. Those docs will show you
how to use the plugin effectively.
As you can see, tuning up your homepage can be a lot of fun. Generally, we don’t recommend
you to work with your theme’s source code to tweak the homepage manually. Even if you
somehow manage to get the visual effect that you wanted, you can never predict how the
changes are going to behave once you update WordPress, or even when viewed on other
devices. Working with your theme’s or plugins’ native features doesn’t cause the same
problems.
6. Create IMPORTANT Pages in WordPress
Speaking of the homepage, it’s also worth mentioning which other pages you can use on your
WordPress site apart from the main one.
Here’s a quick list, mainly just headlines – we’ll let you figure out what you can put on those
pages:
About – tell people about yourself and the site.
Contact – let your visitors contact you.
Portfolio.
Services and products.
Team.
Getting started – tell people where to get started with your content.
Client testimonials.
Tools and recommendations.
Coupons.
Content archive.
Support.
Career.
FAQ.
Advertising.
7. WordPress SEO (and what you need to do)
SEO is a crucial element for most websites on the web, and also a crucial part of website
customization. Frankly, without SEO, it’s more difficult for your audience or customers to find
you on Google. Not good!
Now, there are two sides to SEO:
1. On-page SEO.
2. Off-page SEO.
Off-page SEO is about everything you do outside of your site – talking about your brand
elsewhere, convincing people to link their site to yours, getting social media shares for your
content, etc. Let’s leave that for now.
On-page SEO is about everything you can do to optimize your individual WordPress pages to be
more Google-friendly. This is what we’re going to cover here.
WordPress comes with some built-in SEO optimizations, not many. That’s why you need a
plugin to boost things up. The most popular and the best one is called Yoast SEO.
That plugin is incredibly feature-rich. To cover all those features here would require a guide of
its own, so we’re just going to focus on the absolutely crucial stuff, and then let you do further
reading/tuning-up if you’re interested.
Let’s begin with going to wp-admin / SEO. Then switch to the “General” tab, and view
the introduction tour. It will explain how to work with the main sections of the plugin to make
your WordPress site optimized.
After that, go through each of the other tabs and provide the info you’re asked for. The
“Webmaster Tools” tab is particularly important as it allows you to hook up your site to the
Google Search Console and Bing Webmaster Tools (both deliver crucial insights about your
site’s SEO health).
Next, go to wp-admin / SEO / Titles & Metas, and fill in all your preferred page titles and meta
descriptions. This helps to optimize the default versions of those pages. If you’re not sure about
some of the toggle switches, you can safely leave them with their default values.
The next section – wp-admin / SEO / Social – is where you can hook up your social media
profiles, and enable both Facebook Open Graph and Twitter Cards – those will help you get
your content more visible on those platforms.
Next, go to wp-admin / SEO / XML Sitemaps. Basically, the only thing you need to do there is to
make sure that the sitemaps are enabled (the top toggle button). XML sitemaps are used by
Google to navigate your website and eventually get to your individual posts and pages.
At this stage, you’re pretty much done with the main settings, but you should also have a look
at your individual posts and pages, and tweak their specific SEO parameters too. In short, when
you go to edit any post or page, you’ll see this box at the bottom:
(a) – the main SEO snippet that’s visible in Google searches. Tweak this first.
(b) – the main focus keyword of the page. Set it to the phrase what’s the most
important for you when it comes to that specific page.
(c) – tips on how to optimize your page based on the focus keyword.
(d) – additional tab offering tons of useful tips on how to improve the page’s readability.
Note. It’s crucial to tweak the SEO parameters for your most important posts/pages, including
the homepage!
8. Add Social Media Integration
The last thing we’re going to take care of when it comes to tweaking and customizing your
WordPress site is getting some proper social media integration!
Social media is essential! It’s how a big part of your audience even finds your content, and it
also has an impact on your SEO (this has been proven by Moz.com some time ago).
Long story short – your goal with social media integration is to:
make it easy for people to share your content,
make those individual shares optimized,
share content yourself effectively and at the right time,
be on all the main social networks,
make it easy for people to follow you,
track your social media popularity.
Here are the tools that will help you do so:
Share/like buttons. The best way to get yourself some of those is to use the Share
Buttons & Analytics by GetSocial plugin. It’s free, and it gives you a set of very good-
looking and functional buttons for all networks. Plus, you can place those buttons in
various places through your site design (no matter what theme you use).
Posting your content automatically. A very neat trick you can implement to make your
work with social media much easier is to get yourself some kind of an auto-posting
plugin. The one I recommend is called Revive Old Post. After a short configuration, it will
pick a random post from your archives, and share it across your social media profiles.
Make your shares look good. By default, if someone shares your content on social
media, the share itself includes just the title of the post and a link to it. However, if you
get a plugin like WPSSO, you can include images into the structure of the shares, plus
make them much better looking and thus much more likely to be spread.
Follow buttons. Lastly, you need some nice follow buttons that will encourage your
visitors to add you as a social media friend. There’s a great generator for Twitter here,
and a plugin to get a similar thing for Instagram.
WHAT ARE PLUGINS?
A plugin is a software add-on that is installed on a program, enhancing its capabilities.
WordPress plugins are bits of software that can be uploaded to extend and expand the
functionality of your WordPress site
USERS & USER PROFILES
WordPress comes with a user role management system which defines what a specific user can
and cannot do on your website. Knowing these user roles and permissions are essential as your
WordPress site grows. In this beginner’s guide to WordPress user roles, we will compare each
WordPress user roles and permissions in an easy to follow infographic.
Out of the box when you install WordPress, there are five default user roles:
Administrator
Editor
Author
Contributor
Subscriber
1. Administrator
On a regular WordPress install, Administrator is the most powerful user role. Users with the
administrator role can add new posts, edit any posts by any users on the site, and even delete
those posts.
They can install, edit, and delete plugins as well as themes. Most importantly an administrator
user can add new users to the site, change information about existing users including their
passwords as well as delete any user (yes other administrators too).
This role is basically reserved for site owners and gives you the full control of your WordPress
site. If you are running a multi-user WordPress site, then you need to be very careful who you
assign an administrator user role.
We also recommend that you read this article: Should You Give Admin Access to Plugin
Developers for Fixing Bugs?
2. Editor
Users with the editor role in WordPress have full control on the content sections your website.
They can add, edit, publish, and delete any posts on a WordPress site including the ones written
by others. An editor can moderate, edit, and delete comments as well.
Editors do not have access to change your site settings, install plugins and themes, or add new
users.
3. Author
As the name suggests, users with the author role can write, edit, and publish their own posts.
They can also delete their own posts, even if they are published.
When writing posts, authors cannot create categories however they can choose from existing
categories. On the other hand, they can add tags to their posts (See: Categories vs Tags – Which
one is better for SEO?).
Authors can view comments even those that are pending review, but they cannot moderate,
approve, or delete any comments.
They do not have access to settings, plugins, or themes, so it is a fairly low-risk user role on a
site with the exception of their ability to delete their own posts once they’re published.
4. Contributor
Contributors can add new posts and edit their own posts, but they cannot publish any posts not
even their own. When writing posts, they cannot create new categories and will have to choose
from existing categories. However, they can add tags to their posts.
The biggest disadvantage of a contributor role is that they cannot upload files (meaning they
can’t add images on their own article).
Contributors can view comments even those awaiting moderation. But they cannot approve or
delete comments.
They do not have access to settings, plugins, or themes, so they cannot change any settings on
your site.
5. Subscriber
Users with the subscriber user role can login to your WordPress site and update their user
profiles. They can change their passwords if they want to. They cannot write posts, view
comments, or do anything else inside your WordPress admin area.
This user role is particularly useful if you require users to login before they can read a post or
leave a comment.
Bonus: Super Admin
This user role is only available on a WordPress Multisite Network. Users with the super admin
user role can add and delete sites on a multisite network. They can also install plugins and
themes, add users, and perform network wide actions on a WordPress multi-site setup.
Customizing Existing User Roles
Default WordPress user roles are designed to have capabilities that fits the requirement of
most websites. For example, if you run a magazine site, then you can assign Editor user role to
your senior staff and author user role to the junior staff. You can assign contributor user role to
your guest authors and subscriber user role for your site visitors.
But what if you wanted to modify the permissions of an existing WordPress user role?
One thing we do not like about the author role is that not only can they publish their own posts,
but they can also delete them after it’s published. This can undermine your entire editorial
workflow. Also can be disastrous if a paid author leaves on bad terms and decides to delete all
the posts they wrote (the ones you paid them for).
Let’s suppose that you want to modify the author user role, so that the authors cannot delete
their posts once they’re published.
First thing you need to do is install and activate the Capability Manager Enhanced plugin. Upon
activation, go to Users » Capabilities to modify user roles.
GENERAL CONFIGURATION SETTINGS
The WordPress general settings page lets you set up some basic conventions about how your
WordPress site will be displayed, including title, timezone, format for date and time, and more.
Some of the defaults may be fine for your needs, but whenever you set up a new site, it’s a
good idea to double-check everything on this page.
To access the WordPress general settings, use the WordPress dashboard sidebar to click on
Settings -> General.
Site Title
The title may be displayed in several places, including the web browser title bar, and the header
(if your chosen theme has that option). It also appears on the Admin bar in the upper left, if
you’re in the dashboard or viewing the site while logged in. Some themes have the option to
include the Site Title as part of the title tag on each page, and it may also be used as an
identifying name in your syndication feeds.
Tip: the site title doesn’t need to be an exact match for your site name, or URL. So make it
readable, and include keywords if possible.
Tagline
This spot provides a place to include a description or short, memorable phrase that describes
more about your site. Some themes also display the tagline in locations such as the header or
sidebar. This field can be left blank.
Tip: For most installations, the default tagline will be “Just another WordPress site,” so be sure
to check that and either change or remove it.
WordPress Address (URL)
This is the actual location of your WordPress installation and core files. For many sites, that will
be the same as the URL your site visitors enter to view your site. However, if you’ve installed
WordPress in a sub-directory, you’ll want to use that here.
Site Address (URL)
This is the address visitors will type into their browser to view your site.
Tip: don’t include a trailing slash in either URL.
Email Address
WordPress sends various messages about administration and maintenance tasks, to the email
address entered here. For example, if you want to be notified when new comments are posted
in response to one of your blog posts, they will go to this address. Or if you allow users to
register for membership in your site, new member notifications will go to this address. This
email is not displayed anywhere on the site, so it’s protected in terms of visibility.
Tip: Note that this does not need to be the same as the Administrator user account.
New User Default Role
If you’re allowing new users to register for an account on your site, you’ll want to select a
default role for them (administrator, editor, author, contributor, subscriber).
Time zone
All WordPress installations default to UTC (Coordinated Universal Time, which is actually in
London, England). The dropdown list lets you choose a time relative to UTC (such as “UTC+9”)
but there’s also a convenient list of cities organized by continent. While your city may not be
listed, you’ll surely find one that works. For example, if you live in San Francisco, which is not
listed… Los Angeles is in the list and we know that’s the same time zone.
Tip: Once you set the time zone, your local time will be shown below that selection box, so you
can double-check that it’s correct.
Date Format
By default, the date format is April 27, 2017, but other popular options are available, such as
4/27/2017, or 2017-4-27. There’s also an option to customize, and the WordPress Codex has
details for specifying custom formats.
Tip: Today’s date is shown in the different format options, so you’ll know exactly what you’re
selecting.
Time Format
Again there is a default, with several other formatting options, and the ability to specify a
custom date.
Week Starts On
Let’s you select whether you’d like your week to start on Sunday, Monday, or any other day, for
that matter! This is a helpful setting if you are using a calendar widget that wants to know how
to format weeks, as it would control the day displayed in the far left (first) column of the
calendar.
Site Language
Let’s you select which language is used in the dashboard, from an extensive dropdown list.
WORDPRESS BACKEND
Once you’re in the back end, there will be quite a bit on the screen to digest. This tutorial will
focus primarily on the top bar and the left-hand sidebar. In this section, we’ll go over the top
bar.
At the very left-hand side of the dashboard, you’ll see the WordPress logo. Clicking on that will
give you some basic information about your WordPress site, such as the version of WordPress
that you’re using.
The name of your site should be to the right of that. If you click on that, you’ll be taken to your
site’s home page. It’s a valuable link to click when you’ve made configuration changes so that
you can immediately view how those changes have impacted your site.
To the right of that is a speech bubble. That shows you how many comments are on your site. If
you click on the bubble, you’ll be taken to a new screen that allows you to edit the comments.
To the right of the speech bubble, you’ll see the word New with a plus sign in front of it. If you
click on that link, you’ll be taken to an edit screen that enables you to add new content to your
site. Note that if you hover over the New link, you’ll see a drop-down menu that shows you
what types of content you can add.
On the far right of the top bar you’ll see your name. If you hover over your name, you’ll notice a
drop-down menu that gives you the option to edit your profile or log out of the back end.
It should be noted that the contents of the left-hand navigation bar will vary slightly (if not
significantly) from installation to installation. That’s because installed plugins can (and often do)
add new options to the sidebar. This tutorial will cover the basic options.
Dashboard
At the very top of the left-hand navigation bar is the word Dashboard. If you click that, you
might notice that the page loads but nothing happens. That’s because the dashboard is the
same thing as the default view of the back end. In other words, you’re already on the
dashboard. So, if you’re ever “lost” and not sure how to get back to the initial screen on the
back end, click this link.
Posts
This is the option you use to create, edit, update, and delete posts. If you hover over it, you
might notice a fly-out menu that appears. That menu will give you the option to view all of your
posts (which you can then edit or delete), create a post, view your tags, or view your categories.
If you opt to create a post, you’ll be taken to a screen that enables you to create content in
WYSIWYG (What You See Is What You Get) format. The icons at the top of the editor are very
similar to what you would expect to see in any word processor. The right-hand sidebar on that
screen gives you the opportunity to add categories, tags, and add a featured image to your
post.
Media
This is the option that you click if you want to view media that’s used on your website or add
new media. In WordPress, media can be defined as images, recordings, videos, or other files.
However, most of the time you upload media, you’ll probably be uploading an image.
The flyout menu that appears when you hover over the Media option gives you two additional
options: Library and Add New. If you select the Library option, you’ll be taken to a screen where
you can browse your media uploads. If you click Add New, you’ll be taken to a screen where
you can upload images directly from your personal computer.
Pages
The Pages option functions similar to Posts except that it deals with pages. You can manage
your pages or create a new page. This is the option you use if you want to create a “Contact”
page or an “About Us” page.
Comments
It is strongly recommended that you adopt a more sophisticated comments system than the
default option that comes with WordPress. Whatever system you select, you click this option to
manage the comments that are on your site. This is also how you delete comments that are
spam.
Appearance
Simply put, this option enables you to change the look and feel of your website. If you hover
over it, you’ll see numerous options in the fly out menu that appears:
Themes: Select this option if you want to change the overall look and feel of your
website. You can download some great themes for free from the WordPress website.
Customize: Click on this option if you want to change your site title and tagline.
Widgets: This will take you to a screen that shows you all of the widgets that are
available to you. You actually “use” the widgets by dragging them to sections of the
screen identified as graphical user interface (GUI) boxes. For example, you might drag a
widget called “Latest Posts” from the left-hand side of the screen to a box that reads
“Right Sidebar” on the right-hand side of the screen. That will display your latest posts
on that sidebar on your site.
Menus: This will give you the option to manage your menus. You can create new menus,
specify where you’d like the menus to appear, and add items to each menu. These
menus will be displayed differently from theme to theme.
Editor: This is for advanced users. If you’re interested in changing the source code of
your theme, you would go here, select the correct file from the right-hand sidebar, and
make the necessary changes.
Plugins
Click on this option if you’d like to review the plugins that you have installed or if you’d like to
install a new plugin. Keep in mind that adding a new plugin will often change the contents of
the left-hand navigation bar.
Users
You might not be the only one who uses your website. It’s possible that you rely on an army of
authors and editors to create content for you. Click on this option to create, delete, and
manage your team of users.
Settings
If you hover over the Settings option, you’ll see a flyout menu that gives you several other
options:
General: Click this option if you’d like to change basic configuration information about
your site, such as its title, tagline, or the email address of the site administrator.
Writing: Click this option to configure basic information about your posts, such as the
default category and the post format.
Reading: Click this option if you want to set information about how your site is displayed
to visitors.
Discussion: Click this option if you’d like to configure how your comments section is
structured.
Media: Click this option to specify default dimensions for images of various sizes.
Permalinks: Click this option to configure how you’d like permalinks to appear on your
web The Top Bar
MAINTAINCE
Your WordPress database contains every post, every comment and every link you have on your
blog. If your database gets erased or corrupted, you stand to lose everything you have written.
There are many reasons why this could happen and not all are things you can control. With a
proper backup of your WordPress database and files, you can quickly restore things back to
normal.
Site backups are essential because problems inevitably occur and you need to be in a position
to take action when disaster strikes. Spending a few minutes to make an easy, convenient
backup of your database will allow you to spend even more time being creative and productive
with your website.
There are two parts to backing up your WordPress site: Database and Files. You need to back up
the entire site, and you need to back up your WordPress database. Below are instructions for
backing up your WordPress database for various server programs. We will start with backing up
the rest of your WordPress site.
Your WordPress site consists of the following:
WordPress Core Installation
WordPress Plugins
WordPress Themes
Images and Files
JavaScript and PHP scripts, and other code files
Additional Files and Static Web Pages
All of these are used in various combinations to generate your website. The database contains
your posts and a lot of data generated on your site, but it does not include the above elements
that all come together to create the look and information on your site. These need to be saved.
Most hosts back up the entire server, including your site, but it takes time to request a copy of
your site from their backups, and a speedy recovery is critical. You need to learn how to back up
your own site files and restore them.
Here are some methods to backup your site files:
Website Host Provided Backup Software
Most website hosts provide software to back up your site. Check with your host to find out
what services and programs they provide.
Create Sync with your Site
WinSCP and other programs allow you to sync with your website to keep a mirror copy of the
content on your server and hard drive updated. It saves time and makes sure you have the
latest files in both places.
Copy Your Files to Your Desktop
Using FTP Clients or UNIX Shell Skills you can copy the files to a folder on your computer. Once
there, you can zip or compress them into a zip file to save space, allowing you to keep several
versions.
Remember, keep at least three backups on file, just in case one is corrupted or lost, and store
them in different places and on different mediums, like CD, DVD, different hard drives, etc.