in this video we'll show you
step-by-step how to start a wordpress
blog for 2018 and rather than give you a
one-size-fits-all approach I'll show you
the fundamentals and give you the
resources you'll need to create the
exact type of blog you're looking for
whether you want to start a fashion blog
something like this or a travel blog
maybe even a lifestyle blog
or a food and cooking blog or really any
type of blog for that matter in this
video I'll show you how to do it for
this video we'll go and create this
exact blog here but more importantly
I'll teach you the process for building
any of the blog's we featured before the
wordpress themes for which can be found
on the OHKLYN blog at OHKLYN 0-h-k-l-y-n.com/blog under the
WordPress theme reviews category this
video will focus on the fundamentals of
setting up a wordpress blog and give you
the resources you need to put together
the exact log you want having built
hundreds of WordPress websites and blogs
for clients ranging from $1500 to tens
of thousands of dollars I can walk you
through best practices and help you
avoid the common mistakes that beginners
often make so if that sounds good then
let's get into our how to start a
wordpress blog 2018 tutorial there are
two types of wordpress blogs a self
hosted option often referred to as
wordpress.org and a wordpress hosted
option referred to as wordpress.com
which is limited in functionality and
design as it restricts access to certain
themes and plugins for this reason most
bloggers will choose a self hosted
option and in this video I'll go through
the steps involved in setting up a self
hosted WordPress blog this video is
intended for beginners and those who may
have some experience with WordPress what
I'll focus on is the process of setting
up a wordpress blog step by step to take
you from zero to hero in about an hour
it can be found on our blog at OHKLYN.
com forward slash blog I'll also add a
direct link to the how to start a
wordpress blog 2018 article in the
description box below I will refer to
the article from time to time so I would
recommend opening a new tab and
following along as we go through and if
you'd like what you see I would
recommend signing up to our newsletter
or subscribing to our YouTube channel
what I'll cover off in this video is
registering your domain and setting up
hosting for your blog installing
WordPress will go through an overview of
WordPress to make sure you're
comfortable with the platform will look
at choosing and uploading a wordpress
theme and lastly customizing your
WordPress blog to reflect your design
style in regards to registering your
domain and setting up hosting for your
blog your domain often refer to as your
URL is the web address for your website
or blog
it's what users will type into their
browsers to access your blog for good
the domain is google.com for OHKLYN its
OHKLYN.com. It's a good idea to pick
something that's relevant and memorable
Hosting is what allows your blog content
to be accessible to users around the
world web hosting refers to the process
of storing the content and data for your
blog on a web server when someone visits
your blog that content is then made
available or served to your blog
visitors on-demand 24/7 if you want to
learn more about hosting then check out
our posts on what is web hosting I'll
add a link in the description box below
our preferred hosting provider and the
one we'll use for this tutorial is
Bluehost as they're really easy to use
reliable and incredibly affordable at
around five to ten dollars per month
depending on the term there's a link in
the description below that gives you
access to discount hosting through
Bluehost
as well as a free domain name if you're
following along with the post on the
Oakland website you can click on this
button here to get access as it says
here the types of domains that are
included for free Ericom toward online
site website space text or dotnet org in
Foucault's us thought beers or dot club
now if you've already purchased your
domain or you want to purchase an
alternative top-level domain such as
blog or geo or dot design for example
maybe because the dot-com isn't
available or you want a country specific
domain such as co uk or condo at you
that's ok you can purchase those domains
through a domain registrar like GoDaddy
or crazy domains or any other domain
registrar I'll add some links below if
you go with that option or as I
mentioned if you've already secured your
domain name all you'll need to do is
then change what's called your domain
name servers to point at Bluehost which
will be your hosting provider
fortunately we're in an article and a
step-by-step guide on how to do this
I'll add the links to these guys in the
description box below and if that
applies to you you can access it there
we'll take care of the first two steps
together which is registering your
domain and setting up hosting for your
blog as well as installing WordPress so
to do this follow the Bluehost link in
the description below or if you're on
the OHKLYN website follow this button
here Bluehost is an affiliate partner of
OHKLYN so by using those links not
only do you get access to discount
hosting and a free domain but they'll
set aside a few dollars from their
marketing budget to help fund future
free videos like the
one so we appreciate you using the link
provided that will take you to this page
and we'll click on the get started now
button to select our hosting plan and
register our free domain select the plan
that's right for you if you intend to
just have one domain for your blog then
the first option will be fine
alternatively if you want to have
multiple domains on the same hosting
account but you'll need to select one of
the other plans
you can always amend this down the track
and the cool thing is you get a 30 day
money back guarantee on either plan so
you can get going risk-free for this
example I'll go with the middle option
to get your free domain name you'll
enter the desired domain name for your
blog in the new domain field select the
domain extension for example.com and hit
next if the domain name isn't available
you'll get an error message and will
need to either select an alternative
domain name try contacting the owner of
that domain to purchase it from them or
select another top-level domain
extension if you've already purchased
your domain name enter the domain in the
transferred domain fill and select next
remember to review the article on how to
change the DNS records 2.0 Bluehost
to set up your hosting account enter the
required account information here in the
package information section choose your
desired hosting term and domain add-on
preferences
I recommend selecting the domain privacy
protection so that your personal
information isn't associated to your
domain and publicly available this is
optional of course once you've entered
the required information add your
payment details review the Terms and
select submit once you've done that
you'll be taken to this page here you'll
have been sent a confirmation email to
the designated email address on the
account you will need to create a
password for your hosting account to do
that click on create your password make
sure to pick a secure password you could
use the suggest password tool to help
you with this once you've entered in
your password review the Terms of Use
and select next
you'll then be able to login to your
Bluehost dashboard as part of the new
Bluehost offering WordPress will
automatically be installed on your new
domain if you've registered your domain
elsewhere you'll need to amend the DNS
records to point at Bluehost and install
WordPress using the Bluehost one-click
WordPress install
for the steps on how to do this review
our article on the OHKLYN blog the
direct link will be in the description
below you can choose to install one of
the free pre-selected WordPress themes
on your domain for this tutorial we'll
use a premium WordPress theme so in this
case we'll just select skip this step
WordPress will now be installed on your
domain to access the backend of your
WordPress website click the start
building this will prompt a guided tour
which you can choose to run through or
not we'll go through this in our
tutorial
so I'll click I don't need help this
will take you to the Bluehost tab within
the backend of your WordPress site to
access your wordpress dashboard click on
dashboard in the menu on the left there
will be a number of notifications that
you can action or dismiss by clicking on
the X in the top right corner you can
amend what's visible on your dashboard
by clicking on the screen options drop
down in the top right and checking or
unchecking the boxes a number of
additional plugins will be installed you
can view these by hovering over plugins
in the admin menu on the left and
selecting install plugins in addition to
the standard WordPress plugins Bluehost
will install jetpack mojo marketplace
optinmonster and WP forms you can leave
these active or choose to deactivate and
delete these plugins I'll leave this up
to you I'll delete mine as I like to use
as few plugins as possible this can be
done in bulk by selecting the checkbox
next to the plugins choosing deactivate
from the bulk actions drop-down and then
clicking apply I'll then delete all the
selected plugins then return back to my
WordPress dashboard if I enter in my
domain name I'll see that WordPress is
now installed congratulations you
officially have a blog whenever you want
to log into the backend of your blog add
forward slash WP - admin to the end of
your domain and it will take you to the
login page for your website so for my
example domain of example.com
I would go to example.com forward slash
WP - admin and enter my login details
for your blog use the login credentials
that you've just set up in the prior
step to access the backend of your blog
alright we've gone through the first two
steps of registering your domain setting
up hosting and installing WordPress now
we can get to the fun
I'll give you a crash course in the
WordPress fundamentals you need to know
about will then move on to selecting a
wordpress theme customizing your blog
design and publishing your concept
whenever you log into your WordPress
website you're taken to your WordPress
dashboard the first time you log in
depending on which hosting provider you
went with there may be you'll walk me
through it feature or welcome series
which you can choose to follow along
with or not I've installed WordPress in
a development environment it's a clean
WordPress install so it should look the
same if it's slightly different though
don't worry the fundamentals will all be
the same I do a lot of WordPress website
and blog development for clients and
prefer to work in a staging or
development environment before pushing a
site live however it isn't always
necessary and for the purpose of this
video we'll build your website on the
live site we will be putting together a
video shortly on how to install
wordpress locally on your computer and
the process of taking your site live so
if that's of interest subscribe to our
youtube channel and check out the video
section for more on that if you build
your website on your live site I would
recommend installing a maintenance mode
or coming soon plug-in I'll provide a
link to a video in the description below
on how to do that okay so the wordpress
dashboard or admin panel is broken down
into three main sections at the top we
have the wordpress toolbar the menu or
admin menu is located on the left hand
side and the main admin area is in the
middle we'll do most of our work I'll
give you a brief overview of each
section now if you want to take a deeper
look then check out our introduction to
WordPress for beginners guide and video
the wordpress toolbar at the top is
dynamic and adjust the available options
depending on which page you're on and if
you're viewing the page from the front
or the back end the admin menu located
to the left of your dashboard is
separated into three main sections those
are the dashboard section the content
management section and the side
administration section the dashboard
section provides easy access to the
dashboard updates and additional plug-in
features the content management section
is where you create and manage posts
pages meteor items comments and
additional plug-in features the site
administration section is where you
configure the design and appearance
settings for your website including
selecting the active theme for your
website creating and managing menus
widgets and customizing your website's
theme
it's also where we manage plugins users
control global WordPress settings and
activate theme and plug-in extensions
like SEO social sharing themes specific
settings and security we'll go through
some practical examples for each of
these in the coming sections once we
upload our theme and start working with
content the menu is fully responsive
meaning that as the screen size gets
smaller the menu adjusts to remain
accessible on all types of devices
lastly the main admin area serves as our
primary workspace and adjust depending
on what's selected from the admin menu
I'll draw your attention to the screen
options tab in the top right corner when
you open this tab you'll see a list of
options and features that are available
for display depending on which page
you're on similarly the help tab to the
right shows you helpful hints for the
page that you're on as well as links to
relevant documentation for a more
detailed overview CEO introduction to
WordPress for beginners guide or video
okay now that we've touched on the
fundamentals of WordPress let's move on
to choosing and uploading your WordPress
theme a wordpress theme is a group of
files that work with the underlying
WordPress software to enhance the design
and functionality of your WordPress blog
for a more detailed overview check out
our what is a wordpress theme article on
the OHKLYN blog there are both free
themes and premium themes you can use
for your blog as I alluded to earlier
the main benefits of using a premium
theme is access to support the
inclusions of more extensive theme
documentation and instructions extended
functionality and access to demo content
a lot of themes will also include a
one-click demo content importer which
just speeds up the whole process support
is important as it's always good to know
someone's got your backs especially when
you're new to something what you'll find
is that every theme is different and
knowing where to find what you're
looking for may be intuitive to someone
that's a lot of us but often times even
the pros get stung with any of the
premium themes that we recommend there
is always priority support available
themed documentation Zoar instructions
and often demo content and to get you up
and running quickly on the okhla blog
we've analyzed hundreds if not thousands
of WordPress themes based on speed
design ease of use mobile responsiveness
and functionality to make this process a
whole lot easier we've done this by
category and you can access these by the
OHKLYN blog under the
WordPress theme reviews category where
you'll find a number of articles related
to specific natures
the theme that we'll be working with
today is one of the top rated themes in
regards to installing a wordpress theme
you can either install a free theme
directly from the WordPress theme
repository or you can purchase a theme
from a premium WordPress theme provider
and upload the theme which is the option
we'll go with today however if you want
to go with the first option you can
access the free wordpress theme
repository from your dashboard by
navigating to appearance then themes
this will show you your currently
installed and active themes to add a new
theme click on add new you can browse
the WordPress theme library here by
category or by using the feature filter
to search for themes with the specific
features you're looking for if you find
a theme you like you can click on
preview to view what your blog would
look like with that theme in its default
state and if you're happy with it select
install the theme will upload for this
example is called olson and has both a
free and a premium version I'll add a
link in the description below which will
give you access to discounts when
they're available if you're following
along on the OHKLYN site you can click
on this button here which will take you
through to this page I'll be using the
premium version as it comes with more
options layouts and features as well as
priority support which for 50 bucks is
well worth it they do offer other
options for an extra $20 you get access
to all of their themes or you can join
their lifetime Club and access all of
their themes updates and support for
life which is the option we went with
these guys feel great quality themes I
couldn't recommend them highly enough as
you'll see as we go through if you want
to trial the free version you can either
download the free version here search
for the free version within the
WordPress theme repository and select
Install or pick the package that best
suits you to sign up and purchase the
premium version if you go with the
premium option you'll need to enter your
information and payment details to
create an account then log in to the
backend of your CSS ignitor account
within the download area find the olsen
premium theme click on wordpress to
download the latest version of the olson
premium wordpress theme this will
download as a zip file which will upload
as is there's no need to unzip this file
back in the members area you can follow
the link to the theme document
which will provide all the information
you'll need to customize the theme
you'll also find the link to download
the sample content which I'd recommend
as we'll upload this shortly with most
free themes you generally don't get
access to demo content but Austin is
different and you can access this once
you install the theme by clicking on the
download the sample content link that
appears once you install the theme
however you will only have access to the
one default layout style and you will
notice that the functionality and
customization options will be limited
compared to the preemie option that
being said it's still a great looking
theme as I said at the beginning though
this tutorial isn't a one-size-fits-all
if you don't like the Olson theme or you
prefer to use either an alternative free
theme from the WordPress repository or
one of the premium themes featured in
the OHKLYN WordPress theme review
articles that's great feel free to
select one of those and follow the same
process outlined above
now that you've chosen your theme I'll
show you how to upload it you already
know how to install a theme directly
from the WordPress repository so if you
went with the Olsson light theme or
another free theme go ahead and do that
to upload your premium WordPress theme
navigate to appearances and then themes
choose add new and select upload theme
click on choose file and navigate to the
dot zip file for your theme and select
upload if you downloaded the demo
content for Olsson just make sure you
pick the right Olsson dot zip file as
one will be the demo content which will
need to unzip and the other will be the
theme file which will need to remain
zipped I downloaded the theme file first
so the second one is the demo content so
I'll select the Olsons it theme file and
hit open then install now that will do
its thing and once its installed
successfully you'll get a confirmation
message stating that the theme installed
successfully select activate and you're
all set if you haven't downloaded the
demo content already or you're using the
Olsson light theme click on the download
the sample content link that appears
once you install the theme if you want
to install a child theme you can either
use our free child
generator located under the resources
menu tab by following the instructions
alternatively you can also use a plug-in
called child theme configurator to help
set this up this is best practice but
not essential in keeping with our anti
one-size-fits-all approach
we'll now go through the theme
documentation for Olson to finalize the
setup process install any required
plugins and upload the demo content if
you've gone with an alternative theme
find the documentation and go through
the same process with most premium
themes you'll get access to the demo
content which is one of the reasons I
always use premium themes because it
just makes the process so much easier
the link to the Olson theme is in the
description below and on the OHKLYN
website by clicking on this button from
here you'll find the documentation
you'll need under support click on
either Olson for documentation for the
premium version or Olson Lite for
documentation on the free version
alright so we've already taken care of
the theme installation it has some
information here on the minimum
recommended image sizes to be used in
the theme to keep everything looking
crisp speaking of images we're putting
together an article as we speak on the
best free high quality stock image sites
to find images for your blog so remember
to regularly check our blog and
subscribe to our newsletter and YouTube
channel a few that will be featured are
pixels unsplash pixabay just to mention
a few I'll link to these in the
description below as they are awesome
resources for any blogger they all
operate on a cc0 license which is a
Creative Commons open license which
means you can use the images for
whatever you like which is great with no
attribution required the next thing we
need to do is install some plugins that
are leveraged within this theme these
will vary depending on the theme you're
using in this case we'll install socials
ignited if you want to include a contact
form on your website we'll also install
contact form 7 the WP Instagram widget
which will allow us to include an
Instagram feed in the sidebar and footer
we won't need to install jetpack as will
be using contact form 7 for our contact
form and if we scroll down the page a
bit we see that we'll also need the
widget importer and exporter plugin that
we'll use a little later the only
additional plug-in that I would
recommend
is optional is something that limits
login attempts which will be used as a
security measure against people trying a
brute-force attack your blog for this I
would recommend either server security
and limit login attempts by Gregory or
wordfence security by wordfence alright
so let's go and look at how you install
plug-ins from your wordpress dashboard
hover over plugins in the admin menu and
select add new in the search box will
search for socials ignitor
which is by the CSS ignitor team with
plugins you always want to check the
number of active installs the star
rating and the number of reviews when it
was last updated and if it's compatible
with your version of WordPress
everything looks good but it isn't
tested at the moment with the latest
version of WordPress generally if you
see this you should be mindful of what
you're installing in this case however
I've tested it and it's not going to
cause any issues so we'll hit install
now and then activate that will redirect
you to the installed plugins section
we'll do this for the rest of the
plugins that we need to add from the
install plugins page click on the add
new button and search for the remaining
plugins we'll search for contact form 7
it's by Tucker Yuki Miyoshi we'll check
the number of active installs the star
rating a number of reviews when it was
last updated and if it's compatible with
your version of WordPress it all looks
good so we'll select Install Now and
then activate select add new will then
search for WP Instagram widget this
one's by Scott Evans everything looks
good but it isn't tested at the moment
with the latest version of WordPress in
this case however I've tested it and
it's not going to cause any issues so
we're okay to install this plug-in
select Install Now and then activate
select add new search widget importer
and exporter by church themes com select
Install Now and hit activate and the
last plug-in is optional but I would
recommend installing it so click on add
new search for limit login attempts and
we're looking for server security and
limit login attempts by Gregory select
Install Now and then activate
all right we've now installed all the
required plugins and can move on it's
now time to upload our demo content even
though you'll create your own posts
pages menus and categories it's always
good to install the demo content so that
you can see how everything work you can
then choose what you want to amend
delete or save as drafts for later we'll
go through this together you should have
your demo content downloaded and ready
to go if you haven't done this go back
and do this now when you're ready
extract the demo content file in there
you will find a dot XML file and a dot W
ie file the dot XML file will pull in
all the posts pages images etc and the
dot W ie file imports all the widget
settings to import the dot XML file
navigate to the admin panel hover over
tools and select import scroll down
until you see the WordPress option and
select Install Now once the importer is
installed select run importer then
select choose file navigate to the dot
XML file you downloaded and click open
once you've done that select upload file
and import you'll be prompted to assign
the demo content to an author we'll
assign this to the admin user we created
earlier for now check the download and
import file attachments and hit submit
this may take up to a minute or so to
import all the demo content once it's
important success feliu lerm essage
saying all done have fun if it times out
or takes longer than five minutes just
start the process over again you may
receive notifications that certain
content already exists which is fine
once the content is all imported we'll
upload the widget content to do this
hover over tools in the admin menu if
you've installed the widget importer and
exporter plugin you will see widget
importer and exporter as an option click
on this option under the import widget
section select choose file navigate and
select the file with the dot W ie
extension and
open then select import widgets if you
have the premium version all components
will have been imported successfully
however if you have the free version
some options will not have imported
because there is only one sidebar
enabled in the free version ok we now
have the demo content imported let's
move on to customizing your blog and
making this thing really pop before we
go through all the themed content and
start amending posts and pages and
deleting the elements you don't want
let's go into the theme customizer and
amend the global theme settings first
including the widgets he already know a
lot about posts and pages and categories
but I'll walk you through how to amend
all that and how to change the posts
that are currently live into draft mode
so that you can keep the layouts and
styling to use in future posts as well
as amend delete and create any new pages
you want in your blog to navigate to the
theme customizer from your WordPress
dashboard hover over appearance and
click on the customize this will take
you to the theme customizer note that
any changes you make in the settings
below will be previewed live in the
panel on the right-hand side of the
screen however to commit these changes
you'll need to click Save and publish if
you make changes but see the button
greyed out or blue doubt in this case
move the cursor out of the input box
that you've just changed and the button
will then be clickable and allow you to
save changes depending on the size of
your screen you'll need to see the
desktop normal or desktop small view
tablet or mobile view in my case because
I'm working off a 13-inch laptop and the
theme options panel is taking up a
considerable amount of space I'm
actually seeing the small desktop view
in the bottom left corner there is the
option to hide the customizer panel
which in my case reveals the normal
desktop view to unhide the panel I click
on the toggle here I can also switch
between the different device setting
views to explore the responsiveness of
my theme and see how the design responds
on mobile and different sized devices
alternatively if I go to the front end
of the site which I can do by exiting
out of the customizer and selecting
visit site from under the site menu
option in the WordPress toolbar in its
hot
left I'll right click and open this in a
new tab you can see the desktop version
I'll keep this open so we can refer back
to it as we commit changes let's head
back into the theme customizer in the
premium version of Olson you'll notice
it will have a few more options
available to us decide if they're
important to you and if they are follow
the link in the description below or on
the OHKLYN site and upgrade to the
premium version remember to follow along
with the theme documentation as we go
through especially if you're using a
different theme as these options will be
different if you're using eielson I'll
provide additional commentary and walk
you through each option the first option
we have is the header options so click
on header options within there you can
either choose to show social icons or
not
over here you can see that we only have
the RSS feed icon showing down in the
social network settings below we will be
able to select the social media
platforms we want to feature and provide
the links to your social media platforms
the next option is whether or not you
want to show the search feature within
the menu at the top if we view what that
looks like from the regular desktop view
you can decide if that's something you
want to include there or not
next is the option for a sticky menu
with the sticky menu option selected
when you scroll down the page the menu
will stick to the top of the page within
the awesome theme you can either upload
a logo or you can go with a text logo we
manage the logo settings in the site
identity menu which we'll cover off in a
moment but here is where you would
select the color font size and letter
spacing for your text logo if you wanted
to go with that option if you've made
changes to your site hit save and
publish changes to commit these changes
we'll head back to the main customizer
menu the next option is menus here you
can create an assignment use for your
blog if you select menu locations at the
top you'll see the number of menus
supported by your theme in this case
Olsen supports two menus the main menu
and the footer menu the main menu is
your primary navigation at the top and
your footer menu is the secondary
navigation at the bottom of the page to
set these menus we'll click on the drop
down menus and for the main menu we'll
select main and for the footer menu will
select footer these were created when we
uploaded the
demo content if you don't have any menus
created yet you'll need to go back to
the menu panel and select add a menu
I'll walk you through this in a minute
to edit the main menu click on the edit
menu button and you'll see the current
menu items associated to the main menu
to add new items to your menu you click
on the add items button and this shows
you all the pages posts categories tags
and formats that can be added as a menu
item to your menu to add an item to the
menu we just click on the item we want
to add and is added to the menu to
rearrange its location in the menu we
click on the new menu item and drag it
to where we want it to go you can also
add custom links and what these allow us
to do is add both clickable and unclick
Abul text and image links to our menu
say for example you wanted to add a
store that's hosted on a subdomain or
via Shopify you can simply input the
link text and the URL for where you want
the link to go so you might put the URL
as Shopify comm and set the text to shop
similarly if you wanted to add the text
categories and list all the categories
for your blog's underneath that you
would create a custom link with a URL of
a pound sign which takes the user to the
page that they're actually on you can
delete this later on if you like in this
case I'll set the link text to
categories I'll then add this to the
menu then navigate to the categories
drop-down and add in all the categories
for your blog I'll then move them to sit
underneath the categories text and save
and publish that if I go to the front
end of the site I can see that the shop
is linking out to Shopify and the
categories are now in my menu as well
having said that even though you can
edit menus via the customizer my
preferred option isn't to edit them here
within WordPress there is the dedicated
section for managing menus to access
that closed the customer as a for now
remember to Save Changes and we'll come
back in a moment from your dashboard
hover over appearances and select menus
within here you will see the similar
options just laid out differently
the menus pages is broken down into two
tabs edit menus which is where you
manage the content within your menus and
manage locations which is where you can
assign a menu to a specific menu okay
we'll mainly work with the Edit menus
tab as we do pretty much everything we
need to do from within there the first
thing you'll notice is the option to
select a menu to edit in our case we'll
select main menu and hit select here you
can toggle between the menus that have
been created already when we imported
the demo content depending on the theme
you're working with and if you haven't
uploaded the demo content you may need
to create a new menu to do that click on
create a new menu give it a name pick
obviously something that makes sense to
you below that you'll have your menu
structure that should look familiar if
you created a new menu you'll need to
add new menu items like we did before
the available options that are on your
left you'll also need to assign a
location for the menu under display
location in the menu settings at the
bottom now why I prefer to work with
this space when working with menus is
that were able to access additional menu
items as well as advanced menu
properties from the screen options panel
in the top right you can check the boxes
you want access to to advanced
properties that may be useful our link
target and CSS classes link target adds
another option to your menu items that
allows you to open a menu item in
another tab for example if we wanted to
open our shop link in another tab when
we open the shop menu item we now have
the option to check the open link in a
new tab box similarly we can add CSS
classes to the menu items so that we can
have more control over the styling of
individual menu items that's a little
more advanced for this video but you can
read the documentation if you want to
explore any of these options further
okay so now that you've seen both
options you can decide which area you
want to manage menus from once you start
uploading content and thinking about
navigation let's go back to the
customizer and move on to the next
option which will be site identity in
this tab you can modify the site title
and tagline as well as upload your
primary logo for the logo and site icon
if you don't want to upload a logo you
can delete the awesome logo and use a
text logo that will use your site title
to upload a logo however click on either
change image or select image either drag
or drop your logo into the media library
or select upload file and navigate to
your logo file once it's uploaded it's
good practice to add
alt text which describes the image then
select choose image you can amend the
logo padding at the top and the bottom
which is effectively the white space
above and below your logo to set a
footer logo follow the same process and
you can upload a site icon which is the
icon that appears in the browser tab
when someone is on your blog this should
be Square and at least 512 pixels away
remember to save changes and we'll head
back to the main menu next we have
layout options here you can modify the
blog layout you want to use if we follow
the link in the description to the Olsen
theme and click on the view demo button
and I will take us through to the live
demo site under the blog layouts menu
option you will see the various layout
options that come with the premium
version of this theme such as the
classic two sidebars or the more
minimalistic small listings full width
option perhaps now is a good time to
pause the video and go through the
various layout options to pick the
layout that best suits you once you've
picked a layout you want to use select
it from the drop-down lists in the blog
layout section of the theme customizer
in the next section you can choose
different layout options for category
pages and tag pages of your blog what do
I mean by that if we go to the front-end
of our site you'll see that the category
for each post is listed above the post
title as well as in the side by
navigation and in the blog categories
list that we added to our navigation
menu when you click on a specific
category that will take you through to
the category page which shows all the
articles posted under that category the
category and tags layout option controls
the layouts of these pages so if within
the theme customizer I change it to a
different layout and go back and refresh
the category page you'll see that the
layout has now changed once again take
some time to play around with these
options to find what works best for you
the other pages layout option applies to
all pages that you don't specifically
create for example the 404 page what's a
404 page it's effectively the page that
loads when a user enters a URL on your
website that doesn't exist for example
if you go to the front end of your
website and add random text to the end
of your URL and hit enter that will take
you to the page we're talking about we
can amend the layout for this page here
let's go back to the home page and go
back to the customizer
the automatically generated excerpt
links allows you to control the default
amount of words in the preview of a
posts on the home page or main blog page
and the categories tag pages below that
is the option for the pagination style
you can choose between either numbered
links or previous/next page links
remember to Save Changes and we'll go
back to the main customizer menu next we
have the front page carousel this tab
allows you to configure your home page
slider you can toggle the slider on or
off along with the auto slide feature
below that you can select the slider
source you can choose to show just a
specific category or you could create a
specific category like featured to use
for your slider and assign that category
as a secondary category to the posts you
wanted to include in your slider or you
can create a comma-separated list of the
post ideas for the post that you want to
include in your slider to find the post
IDs from your dashboard hover over posts
in the admin menu and select all posts
from there simply hover over the post
name and in the bottom left corner you
will see the permalink to the post
included within the link will be a post
equals number that number is the post ID
by checking show recent posts the source
for the slider will become the most
recent published posts the limit posts
field is where you limit the number of
posts shown in the slider you can select
a slide change effect and below that set
the amount of time between slides it
defaults at 3,000 milliseconds which is
3 seconds to change this to 5 seconds
you would amend this to 5,000 by
checking hide post content box the post
content will be removed all right save
your changes and head back to the main
customizer menu next we've got
typography options here you will find
the various options regarding the themes
typography you can change heading body
text and widget title sizes and toggle
on or off the capitalization of various
elements I think the default values look
great but if you want to amend the font
sizes etc this is where you'll do it
we'll head back next we've got content
colors if you want to incorporate your
brand color or change the color scheme
this is where you'll do it in here you
can amend the background color by
clicking
the select-color toggle and in the
picking a color or entering the
hexadecimal color code in here you could
also upload a background image or
texture by clicking on select image
uploading it to the media library
selecting the image and hitting choose
image below that there are some image
options to help improve your desire to
remove an image click on remove in the
same way as we did with the background
color you can amend the text color
headings color link color link hover
color so the color of the link changes
to when the user hovers over it the
accent color and the default border
color once again Save Changes and let's
head back to the main customizer menu
next we've got sidebar colors similarly
in this tab you can modify the colors of
the various sidebar elements the same
way we did in the content colors panel
I'll leave that up to you to experiment
with let's move on widgets like menus
have two places where we can amend them
and once again I prefer to use the
dedicated widgets area which can be
found from your WordPress dashboard by
hovering over appearance and selecting
widgets will make our edits here rather
than via the customizer as it's easier
to use and provides access to more
options on the left hand side are all
the available widgets on the right hand
side are the available widget enabled
areas that we just can be added to as
you can see the premium Olsen theme
currently features five widget areas the
blog sidebar the blog Left pages footer
sidebar and the front page inset widget
the blog sidebar is the primary sidebar
and appears on all posts and pages that
have a sidebar if you've uploaded the
demo content you'll notice that there
are a number of widgets already added to
this widget area navigate to the front
end of your site and decide which
widgets you want to keep and which ones
you want to remove to edit the widgets
click on the drop down arrow update the
widget information and click Save unlike
the customizer any changes you make will
automatically be live on your blog to
change the order of the widgets drag and
drop them into place to remove a widget
simply click on delete and to add a new
widget drag the widget from the left and
drop it into the widget areas on the
right
WordPress widgets are the search widget
which enables users to search the
content of your blog the recent post
widget features recent posts in your
sidebar you can limit the number of
posts that are shown here the recent
comments widget the archives widget the
categories widget the meta widget and
the tax widget there are a number of
other widgets that you should explore
and get familiar with I recommend adding
them to your sidebar and deciding which
ones makes sense for your blog to learn
more about the standard WordPress
widgets you can view the documentation
under the help option at the top there
are also a number of themes specific
widgets such as the theme about me
widget which allows you to insert an
image message and upload a signature or
sign off the customize social icons
widget that allows you to incorporate
links to your social accounts the
call-to-action boxes which we'll cover
off shortly as well as the ability to
feature random posts videos music and
more there is also a newsletter signup
widget that allows you to embed a
newsletter signup form the most common
provider is likely MailChimp so I'll
show you how to add the code from
MailChimp and remove the styling to
match the Olson theme if you use another
email marketing or CRM provider the
process will be similar if you use
MailChimp log in to your account and
create the list as usual if you don't
know how to do this and would like a
tutorial comment below and if there's
enough interest we'll put a tutorial
together
navigate to the signup form section
within the list and select embedded
forms then choose the super-slim option
you will leave the default settings as
is and all you need to amend is the text
that you want to have above the signup
form on the Olson demo it's the text
that says enter your email address
to subscribe to this blog and receive
notifications of new posts by email
changes to suit your style and enter it
into the form title field then copy the
code from below navigate back to the
newsletter widget and paste the code
into the newsletter form HTML section
save that and head back to the front of
your site you should see that the
newsletter form is there but the styling
doesn't match the theme this is because
MailChimp applies its own CSS for the
form to match the styling go back into
the newsletter widget and scroll up
within the code to the very top where
you see link H
F equals inverted commas forward slash
forward slash CBN etc we're going to
select that piece of code all the way
down until rel equals stylesheet type
equals text - CSS once you've got that
selected we'll delete that bit of code
save it and head back to the front of
your site you'll see that the styling
looks similar but we need to add some
space between the email input section
and the SUBSCRIBE section to do this we
use what's called CSS we'll be bringing
out a CSS fundamentals course for
WordPress shortly which will teach you
the fundamentals of how to do this sort
of thing to learn more and get access to
a discount head to courses learn digital
l u RN digital comm and sign up to our
newsletter to create the space we want
I'll right-click on the element to
inspect the code although this looks
confusing at first after you've done the
cause this will all make sense what
we're doing is looking for the CSS
selector so that we can add some margin
or space to the top of both the email
input field which has a selector of
input bracket type equals inverted
commas email closing inverted commas
closing bracket and the subscribe button
which has the selector of input square
bracket type equals inverted commas
submit closing inverted commas closing
bracket I will add some test CSS in via
the browser to make sure that it's the
right selector and choose the amount of
padding I want to add in this case I'll
use 15 pixels you can change this amount
if you like once I'm happy with how it
looks I'll go back and add the code to
the form in the back end with in the
newsletter HTML section just above where
it says add your own MailChimp form
style overrides I'll add the code to the
description box below just so that you
can reference it however what you need
to add is the two selectors separated by
a comma so input bracket type equals
inverted commas email closing inverted
commas closing bracket comma space input
square bracket type equals inverted
commas submit closing inverted commas
closing bracket space curly bracket
margin - top
: 15 pixels px semicolon closing curly
bracket now of course anything new is
going to be a little bit confusing
hopefully there you saw some logic there
once we've done that we'll hit save and
then take a look at the front end of our
site and that should be looking all good
now the other widget areas that you'll
manage the same way are the blog left
which will display when one of the two
sided layouts are selected pages which
allows you to customize the sidebar
which displays on static pages of your
blog the footer sidebar this is the area
at the bottom of the page above the
footer menu and logo this is where we'll
add our Instagram slider at the bottom
simply add your Instagram username to
pull in the feed and amend the settings
to suit you the front page inset which
is how you add those custom image links
with the text overlays to the front page
of your blog that are located here on
the demo you do this by adding the theme
call-to-action box widget to the widget
area it will automatically size the
boxes or images to either fit in one two
or three columns too depending on if you
add three or less widgets you can add as
many of these as you like by adding the
title image and the URL okay so that's
pretty much how we just work let's head
back to the customizer up next is social
networks here you can add the URLs to
your various social network accounts
that are supported by the theme these
will appear on the header and footer
automatically you can also display them
in the post page sidebar by adding the
theme social icons widget to the blog or
page sidebar up next is the post options
here you can toggle various aspects of
single post on or off for example if I
click on posts I can choose to not show
the category for example or perhaps hide
the date or comments if you make any
changes hit save and publish and head
back to the main customizer menu in the
page options tab you were able to toggle
on and off the appearance of the
signature and social sharing buttons on
pages up next is the footer options here
you can customize the themes footer by
changing its color scheme and toggling
on and off the tagline social icons and
the WP Instagram slideshow as well as
amended transition speed in the static
front page option if you don't wish to
have the latest posts on your front page
and wish to display static content using
a normal homepage or you want to use the
themes looks templates for your front
page you can do so here by setting your
desired page as the static front page
remember to save and publish your
changes lastly the other tab this is
where you add custom CSS as well as
adding a Google Analytics ID to the blog
if you want to do that okay so you
should be reasonably familiar with the
theme customizer now the best way to get
great at this stuff is just to jump in
and play around with the various
settings to see what works for your
design what I would recommend doing is
familiarizing yourself with the demo
theme content and take inspiration from
the layouts and what you can repurpose
for your own blog I typically create a
number of new posts with my own content
based on the examples in the demo
content once I'm feeling comfortable
with how to create and format posts and
pages I then delete or change the status
to draft for the demo posts and pages
the value in keeping them in draft mode
is that they won't be visible on your
blog but they're always there if you
want to refer back to layouts and see
how that will format it I would then go
in and delete any tags or categories
that you won't be using for your blog
and create new categories that work for
you once you've done that reassess your
menus and widgets the last thing I'll
show you how to do is add a contact form
to your blog using contact form 7 if
that's something you want to do if not
then go ahead and further customize your
blog to suit your style and start
uploading and publishing content if
you've liked this video remember to give
it a thumbs up and subscribe to our
YouTube channel and newsletter feel free
to leave us a comment with what you
liked any feedback and what else you
would like to see to add a contact form
you should have installed the contact
form 7 plugin if you haven't done that
already go back and do that first from
your WordPress dashboard you should see
a new option in the admin menu called
contact click on the contact forms
option the great thing with contact form
7 is that they pre create a form for you
and all we need to do is copy what's
called the shortcode
this thing here and navigate to the page
where we want the contact form on which
in this case is the contact page we'll
go to the text editor tab and paste in
the shortcode where we want the form to
go remember you won't be able to paste
us into the visual editor make sure you
go to the text editor side if we preview
the page you'll see that our form is in
there and ready to go we now just need
to go back to the contact form tab under
the contact option and customize the
form fields we'll click into the form
and the first tab is how we control our
form input fields the default fields are
your name your email subject and your
message the first step is to decide
which fields you want to include in your
form and which fields are required for
this example I want to request their
name as a required field email as a
required field phone not as a required
field and I want to include an
interested in drop-down as a required
field with the options advertising
contributing and other plus a message
box as a required field and the send
button if you look at the default form
fields you see that each input field has
its own piece of code this is the name
field this is the email field etc the
first choice you have is whether you
want the form input labels to be above
the input field like it is in the
default here or if you want to use a
placeholder that sits within the input
field itself to change it to the
placeholder option we remove the label
tags that are wrapping the field as well
as the label text instead what we do is
click within the field shortcode here
hit space and enter placeholder space
inverted comma then enter the
placeholder text you want so in this
case name and then close the inverted
comma I'll save this and refresh our
contact page on the front end and you'll
see that name is now sitting within the
input field as a placeholder we'll go
back to the contact form editor if you
prefer that look then do the same thing
for all the other fields I prefer the
original way so I'll change it back but
remove the word your the next thing we
need to do is customize the fields that
we want to include we want to keep the
name and email fields as required fields
to make a field required you just need
to include the asterisks next to the
field type here I don't want to request
their phone number which isn't a
required
build to add a form field I put my
cursor where I want it and select the
option from the tags and the menu above
the tag I want is tell I can choose to
make this field required or not in this
case I don't want to make it required so
I'll leave the Box unchecked if you
wanted to add a placeholder you would
enter the placeholder here and check
they use this text as the placeholder
box in this case I'll leave this blank
and hit insert tag this creates our
shortcode field
we just need to wrap it in a label tag
we put our opening label tag here and
our closing label tag here remember to
include the forward slash in the closing
tag and then we'll add the label name we
want to use in this case we'll just use
phone let's save that and refresh our
contact page you'll see that we now have
a new phone field which isn't a required
field if you wanted to make it required
you just need to add an asterisk next to
the field type which is tell if we
wanted to keep it that way we should add
the word required within the label to
provide a better user experience but we
won't do that I'll just go back and
remove the asterisks we'll then add the
drop-down box to do this we place the
cursor where we want to select the
drop-down menu tag from the options
above we want to make this required so
we'll check the required box give it a
name of interested in in the options box
I'll enter the options for the drop-down
list one item per line so advertising
contributing and other you can decide if
you want to allow multiple selections or
if you want to insert a blank item is
the first option I'll enter a blank item
but I won't allow multiple options and
select insert tag once again I'll wrap
it in a label tag we put our opening
label tag here and our closing label tag
here we remember to include the forward
slash on the closing tag and then we'll
add the label name that we want to use
in this case we'll use interested in dot
and I'll put in required in brackets
next to that I'll then delete the
subject field as I don't need it and add
an Asterix and the word required to the
message box once I've done that I'll hit
save and refresh my contact form
dadah looks good the only thing is that
the styling of for the drop-down box
doesn't look great I've passed this on
to the CSS ignitor team and I'm sure
they'll be updating this as it's an easy
fix but to style this field the way we
want it so that it looks consistent with
the other fields what we'll need to do
is copy the styling from the field above
and add the CSS code to the custom CSS
section within the theme customizer to
do this if you're in chrome right click
on the phone field above and select
inspect where you see input comma text
area select the CSS code below that to
check that this will work right click on
the drop down list and select inspect
make sure you have the Select name
equals interested in selected and in the
right panel at the top paste the code in
that you just copied if you follow it
along that should now look consistent
what we need to do is commit those
changes so to do that we'll navigate to
appearance and open customizer in a new
tab
scroll to the bottom and select other in
the custom CSS panel will type select
which is the CSS selector and then an
opening curly bracket and a closing
curly bracket will then create space
between the two of them and paste the
code in that we just copied hit save and
publish then refresh the contact page
those changes should now be committed
and that looks good obviously if you
don't want to use a drop-down list or
it's been updated by the time you view
this then you don't need to go and do
that once we've customized our form
input fields we then need to amend what
gets received via email once someone
submits the form if you click into the
mail tab you can set the email address
where the contact form gets submitted to
the from email pulls the name from the
contact form you can leave your email or
put a generic email in like inquiry at
your domain comm or use the custom your
- email field from the previous page to
pull in the email from the contact form
you can tailor the subject line to be
something like blog inquiry or whatever
makes sense for you you can leave
additional headers as it is and in the
message body you want to include the
label or placeholder in the dynamic form
field so that the information inputted
into the form gets sent to you via email
so in our case well delete subject and
add phone the dynamic fields are listed
above we'll also add interested in and
the dynamic field we can then leave the
message tab and additional settings as
is let's hit save will refresh the
contact page complete the form and hit
submit
and that's all working well remember to
check the designated recipient email
address to confirm the information is
coming through as expected and that
brings us to the end of our how to start
a wordpress blog tutorial for 2018
hopefully you've learned a lot and are
now up and running if you enjoy this
video remember to give it a thumbs up
and subscribe to our youtube channel and
newsletter as well as let us know any
feedback to get access to exclusive
discounts free tutorials and to stay in
the loop on the latest happenings sign
up for a newsletter at OHKLYN o-h-k-l-y-n.com and until next time happy
blogging
