How to Start a WordPress Blog | Blog Tutorial for Beginners

How to Start a WordPress Blog | Blog Tutorial for Beginners

August 30, 2019 35 By Bernardo Ryan


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