How to change the color of the menu bar:
Full, step-by-step article: Customize Iconic one free theme colors. For the demo-website, I used the color #9BBB59.
The site is fully responsive, and therefore mobile-friendly! In this tutorial, we sign up for a free website with Site Rubix. Here you can get 2 WordPress websites that are completely free for a lifetime. You can also upgrade to a paid account to unlock more options later, like using your own domain, e-mail to @yourdomain.com and more.
Go to Site Rubix (link in the description). Here you can register a .siterubix.com subdomain. Type in your subdomain, and if it’s available, click ‘Build My Free Website!’. You have to register an account. Fill in your first and last name, your e-mail address, a password, and an account username. Click ‘Create Account & Continue’
Select ‘A free Website’.
Enter your subdomain address again. I enter ‘simplerecipes’ again. Name your website. This will be your website title. Don’t worry, you can change this later. For my site, I enter ‘Easy-to-make Recipes’.
Choose a look for your website. This is your WordPress theme. For the demo-website I’m going to build, I use the ‘Iconic One’ theme.
Click ‘I’m Ready, Build my Website Now!’
Wait while Site Rubix is building your website! (This will take about 30 seconds).
Done! Your website is built!
‘User’ is your WordPress login username, and ‘Password’ is your WordPress password. You can now login to your website directly using your username (‘User’), and password by going to yourwebsite.siterubix.com/wp-admin. You can also login from this page by clicking the ‘Login Now’ button. You’re now logged in. This is your WordPress back-end. You build your website from here. This is not visible to any visitors to your website.
In the next part we’ll have a look at the front-end. This is what visitors to your website will see.
A first look at WordPress
To visit the front-end of your site, click your site title, and then ‘Visit Site’. This is your front-end. By default, this is what your website looks like.
There are 2 different kinds of webpages you can build: Posts and Pages. By default, your website is set up like a blog, and shows all your latest posts on the homepage, on what’s known as a ‘blogroll’.
By default, there is a sample post, and a sample page.
Visitors won’t see the black bar on top; you’ll only see this when logged in.
On your blogroll, you see a excerpt of your posts. By clicking on the title on your posts you’ll go to the full posts. This is a post. Posts display posting date and the author.
This (Sample Page) is a page.
Click ‘Posts’. Here you’ll see a list of all the posts you’ve written. Right now it only shows the sample ‘Hello World’ post. Check the checkbox in front of ‘Hello world!’, click the drop-down menu, select ‘Move to Trash’, and then click ‘Apply’. To delete the sample page, click ‘Pages’. Check the box in front of ‘Sample Page’, click the dropdown-menu, and select ‘Move to Trash’, and then click ‘Apply’.
Click ‘Pages’, and then ‘Add New’.
Click the icon on the far left; ‘Toolbar Toggle’, to show more options on the toolbar.
For the most important headers on a page, use ‘Heading 2’. This is because the title of your page already uses ‘Heading 1’. Now, replace all the instances of ‘YOURWEBSITE.com’ in the template with the actual URL of your website.
Also, replace YOUREMAIL@YOURWEBSITE.com with your email address.
To make a URL in your post a link, select it, and click the link icon (‘Insert/edit link’). If the text is already a URL, it’ll automatically be added as the destination URL. Click ‘Add link’ to make it a clickable link on your page.
When you’re done editing your page, click ‘Publish’ to publish it. To view the page you just published, click ‘View page’. This is what your page looks like to visitors.
Now, let’s add the About-page.
Click ‘Add New’.
Write your page title, in this case ‘About’. Write something about yourself and your site. Also, include some contact info, like your email address. Obviously, you can do a lot better than my very short example ;). When you’re done, click ‘Publish’.
Changing your Post Author Profile
Before writing a post, I’m going to change my username.
Your username is the name that shows up as the author of posts on your site. By default it’s ‘admin’, but you can easily change this. Click ‘Howdy, admin’ in the top right, and then click ‘Edit my profile’. Scroll down, and change ‘Nickname’ to your name.
You can now change your display name to your nickname. Click the dropdown menu and select your name. Click ‘Update Profile’.
Creating Website content – Writing a Post
Click ‘Post’, and then ‘Add new’.
Add a title for your post.
For my recipe blog example, I’m writing a post with a Pizza Dough recipe. Write your article. I have my article pre-written, so I just copy it in.
To make a header, select the text, click the drop-down menu, and select ‘Heading 2’ for a heading (the post title is Heading 1).
For subheadings, select ‘Heading 3’.
To make a link, copy the URL you want to link to, select text in your post, and click the link logo (‘Insert/edit link’). Paste your link. You can also add a Title (which will show up when you hover over the link). When you’re done, click ‘Add link’.
To add an image, click a location in the post where you want to insert it, click ‘Add Media’, and then ‘Select files’ to upload from your PC. Navigate to your picture file, select it, and click ‘Open’.
When your picture is uploaded, click ‘Insert into post’. To change your picture, select it, and click ‘Edit’. To change the size, click the drop-down menu, and select a size. I select ‘Large’, which is the maximum width of the post. Click ‘Update’.
Note: You can’t just add any image you want to your website because of copyright.
Either use your own, or find free-to-use images. More information on finding free-to-use images, see the video description.
Click ‘Set Featured image’. The featured image for you post will show up in the blogroll, next to the excerpt of your post.
Select your favorite image, and click ‘Set featured image’.
You can add your post to a Category. Categories make it easier to navigate your website. Click the link ‘Add New Category’. Write the name of your category. I add the category ‘Dinner’, which I intend to add all my dinner recipes to. Click the ‘Add New Category’ button to add your category.
Once you’ve added a category, you can select it for your next post by checking the box in front of it.
When you’re done editing your post, click ‘Publish’ to publish your post. Click ‘View post’ to check out your finished post on the front-end.
Your post now also shows up in your blogroll (with the featured image and an excerpt of the post).
Making Custom Menus for your website
For the example site, I’m going to add some categories to the menu. Click ‘Categories’, check the boxes in front of all the categories you want to add, and click ‘Add to Menu’. You can switch menu items around by dragging and dropping. Click ‘Create Menu’ when you’re done. To use the menu you made on your site, click ‘Manage Locations’. For Primary Menu, select the menu you have created. Then, click ‘Save Changes’.
Done! To see what it looks like, I’m refreshing my homepage.
(By now I have already added more articles for demonstration purposes)
You can customize the site title and tagline, the site header image, the (sidebar) widgets, and the footer text.
Click ‘Appearance’, and then ‘Customize’.
Click ‘Site Title & Tagline’. You have already set your site title when first building your website. You can change it here if you want. By default, the Tagline is ‘Just another WordPress site’. Preferably, change it to something more descriptive.
For instance, I change it to: ‘Simple recipes anyone can make’. For logo, you can pick any picture. This can be a small logo picture, or a large header image. I’m going for a large header image. Click ‘Select Image’, then ‘Upload Files’, then ‘Select files’.
Browse to your file, select it, and click ‘Open’. Click the ‘Choose Image’ button to use your image. The last thing I’m going to customize is the footer. Click ‘Footer’.
You can change the text on the footer on the left and right side. The one on the left is usually used for copyright. I make it say: “© 2015 – simplerecipes.siterubix.com”
For an example HTML link and instructions on making your own, see the video description.
Once you’re done making all your customizations, click ‘Save & Publish’.
This is what your site looks like now (the link in the footer works).
To demonstrate what the stylesheet changes do, I’m refreshing the page, after making the changes.
Done! We have now built the entire website as shown in the beginning of the video.
Of course, there is a lot more you can do with your WordPress website than what I’ve shown in this video…
Subscribe to my channel if you want to see my upcoming WordPress how-to’s, tips and tricks!
Also, see the link in the description to find WordPress tutorial articles written by me.
Thanks for watching, and enjoy building your own WordPress website!