If you read part 1 and part 2 of this post series, you should now have an overview of what WordPress is and know how to configure its essential settings in the dashboard.
Now, I’m going to walk you through importing and installing a theme and adding in some basic content.
But first, let’s look briefly at what themes come pre-installed with WordPress.
WordPress’ Preinstalled Themes
WordPress themes are accessed through the Appearance section of the dashboard panel. Clicking on Themes will display all currently installed themes. The current WordPress default theme is Twenty Twenty-One.
By default, this is the active theme at the time of this writing. WordPress releases a new theme each year named after the year it is released.
There are three other themes available: Twenty-nineteen, Twenty-twenty, and Sinatra. These themes are designed to be customized quickly for blogs and simple websites.
Each of these themes have:
- Custom header logos and design elements such as titles and buttons
- Navigation menus in the header and footer
- Multiple custom post formats
- Predefined block layouts to help you build pages quickly
To switch to another theme, hover over that theme with your mouse and click the Activate button.
To see how the theme will look with your current content, click the Live Preview button. This opens the Customization screen and is where changes are made to the theme layout and look.
If you want to save changes and make the switch, choose Activate and Publish.
Importing A New Theme
There are two ways to add a new theme to WordPress.
Click on Appearance > Themes > Add New. Browse the official repository to find a theme you like. Once you’ve found it, click Install and then Activate.
Or if you’ve downloaded a WordPress theme from a third-party author or marketplace, you can upload it by going to Appearance > Themes > Add New > Upload Theme.
For the purposes of this post, I’ll install a free one-page theme called One Page Express and two recommended plugins—one for a prebuilt homepage and another for a contact form. I picked this one because I want to setup a simple one-page site with a contact form.
The free theme is contained in a zipped file I downloaded to my computer from WordPress themes directory.
Click the Choose File button in the installation window and locate the file. Click Open to select it. Once back in the installation window, the file I selected—one-page-express.1.3.18.zip—is indicated. click Install Now to start the installation.
Follow the on-screen prompts for theme activation, homepage companion, and contact form plugin installation and activation.
Changing the site identity elements
Now that the theme is installed and activated, the first order of business is to customize it. Access the customization screen through the themes panel by clicking the Customize button. Alternatively, you can access it by through Appearance>Customize in the dashboard left panel. Changes made to the theme’s appearance and layout will appear as they are made in the preview window. After making changes, I always click Publish to save them.
Scroll down the window on the left side and locate General Settings>Site Identity. You’ll notice the site title and tagline are already filled in because I did that when I configured WordPress settings in Part 2.
This theme uses a sticky header and uses light and dark logo versions. I created two versions for this demo, but first, I need to adjust the permissible logo height to ninety-nine pixels because that’s the exact height for the logo versions I created.
Next, under logo, I click Select logo and upload the white version first. I skip the cropping option. Next, I do the same for the dark version.
Finally, I upload the site icon or favicon which appears in the browser tab when visitors go to the site. Because this image should be a transparent file, I created one in Adobe Illustrator and exported it as a PNG file. I chose a dark version because the white one is almost impossible to see because my browser has a light-colored theme.
Hit the Publish button at the top of the screen to preserve the changes.
Changing the site appearance
The next step I’ll undertake is to change the site appearance, starting with the header background image. I could pick one of the available free header layout designs inside the theme and customize it. The default layout is not that bad, so I’ll stick with it.
I located a suitable close-up photo of some grass on Unsplash suited for a lawn care service. Because the free version of the theme limits what text I can add to the header image, I added the phone number and email address to the image in Photoshop and exported it as a JPG file.
From the main customization menu, I choose Header >Front Page Header Background. Scrolling down to Header Background Options, under Header Background Options, I select Change image and select it from the media library. Click on Choose Image to replace the current image and click Publish to save the changes.
The site is beginning to take shape, but there’s still too much clutter. To give myself some breathing room, I’ll remove design elements I don’t want and make some content changes to suit my needs. When I’m done, I’ve reduced the number of content sections down to four and rearranged their order.
Adding site content
Now, I’ll customize the rest of the site including its text, images and buttons.
We’re almost done. The only remaining tasks are to embed the contact form (with the assumption its setup has been completed with the proper email addresses, etc.), adjust the menu, and remove the Coming Soon placeholder.
Now that the basic site setup, there’s still a lot of things to do with the help of plugins: add SPAM protection and security, hide the wp-admin page, redirect 404 errors, optimize images, connect the site to Google Analytics, setup SEO, automate backups, and so on.
But I hope this gives you a sneak-peak at what’s involved with creating a self-hosted WordPress site.
I wish you the best in your WordPress endeavors!
Share This Story!
Related Posts
If you read part 1 and part 2 of this post series, you should now have an overview of what WordPress is and know how to configure its essential settings in the dashboard.
Now, I’m going to walk you through importing and installing a theme and adding in some basic content.
But first, let’s look briefly at what themes come pre-installed with WordPress.
WordPress’ Preinstalled Themes
WordPress themes are accessed through the Appearance section of the dashboard panel. Clicking on Themes will display all currently installed themes. The current WordPress default theme is Twenty Twenty-One.
By default, this is the active theme at the time of this writing. WordPress releases a new theme each year named after the year it is released.
There are three other themes available: Twenty-nineteen, Twenty-twenty, and Sinatra. These themes are designed to be customized quickly for blogs and simple websites.
Each of these themes have:
- Custom header logos and design elements such as titles and buttons
- Navigation menus in the header and footer
- Multiple custom post formats
- Predefined block layouts to help you build pages quickly
To switch to another theme, hover over that theme with your mouse and click the Activate button.
To see how the theme will look with your current content, click the Live Preview button. This opens the Customization screen and is where changes are made to the theme layout and look.
If you want to save changes and make the switch, choose Activate and Publish.
Importing A New Theme
There are two ways to add a new theme to WordPress.
Click on Appearance > Themes > Add New. Browse the official repository to find a theme you like. Once you’ve found it, click Install and then Activate.
Or if you’ve downloaded a WordPress theme from a third-party author or marketplace, you can upload it by going to Appearance > Themes > Add New > Upload Theme.
For the purposes of this post, I’ll install a free one-page theme called One Page Express and two recommended plugins—one for a prebuilt homepage and another for a contact form. I picked this one because I want to setup a simple one-page site with a contact form.
The free theme is contained in a zipped file I downloaded to my computer from WordPress themes directory.
Click the Choose File button in the installation window and locate the file. Click Open to select it. Once back in the installation window, the file I selected—one-page-express.1.3.18.zip—is indicated. click Install Now to start the installation.
Follow the on-screen prompts for theme activation, homepage companion, and contact form plugin installation and activation.
Changing the site identity elements
Now that the theme is installed and activated, the first order of business is to customize it. Access the customization screen through the themes panel by clicking the Customize button. Alternatively, you can access it by through Appearance>Customize in the dashboard left panel. Changes made to the theme’s appearance and layout will appear as they are made in the preview window. After making changes, I always click Publish to save them.
Scroll down the window on the left side and locate General Settings>Site Identity. You’ll notice the site title and tagline are already filled in because I did that when I configured WordPress settings in Part 2.
This theme uses a sticky header and uses light and dark logo versions. I created two versions for this demo, but first, I need to adjust the permissible logo height to ninety-nine pixels because that’s the exact height for the logo versions I created.
Next, under logo, I click Select logo and upload the white version first. I skip the cropping option. Next, I do the same for the dark version.
Finally, I upload the site icon or favicon which appears in the browser tab when visitors go to the site. Because this image should be a transparent file, I created one in Adobe Illustrator and exported it as a PNG file. I chose a dark version because the white one is almost impossible to see because my browser has a light-colored theme.
Hit the Publish button at the top of the screen to preserve the changes.
Changing the site appearance
The next step I’ll undertake is to change the site appearance, starting with the header background image. I could pick one of the available free header layout designs inside the theme and customize it. The default layout is not that bad, so I’ll stick with it.
I located a suitable close-up photo of some grass on Unsplash suited for a lawn care service. Because the free version of the theme limits what text I can add to the header image, I added the phone number and email address to the image in Photoshop and exported it as a JPG file.
From the main customization menu, I choose Header >Front Page Header Background. Scrolling down to Header Background Options, under Header Background Options, I select Change image and select it from the media library. Click on Choose Image to replace the current image and click Publish to save the changes.
The site is beginning to take shape, but there’s still too much clutter. To give myself some breathing room, I’ll remove design elements I don’t want and make some content changes to suit my needs. When I’m done, I’ve reduced the number of content sections down to four and rearranged their order.
Adding site content
Now, I’ll customize the rest of the site including its text, images and buttons.
We’re almost done. The only remaining tasks are to embed the contact form (with the assumption its setup has been completed with the proper email addresses, etc.), adjust the menu, and remove the Coming Soon placeholder.
Now that the basic site setup, there’s still a lot of things to do with the help of plugins: add SPAM protection and security, hide the wp-admin page, redirect 404 errors, optimize images, connect the site to Google Analytics, setup SEO, automate backups, and so on.
But I hope this gives you a sneak-peak at what’s involved with creating a self-hosted WordPress site.
I wish you the best in your WordPress endeavors!
