The online presence of your business is very important in today’s market. A nice-looking and user-friendly website is very essential as the users base their first impressions and opinion on it.
If you think, your website is outdated, if it is hard to navigate, if the features are not working, if the content is not effective if you are not getting responses, or if you feel your website needs changes, you can start with the redesign process or you can simply change the appearance of your site.
Easy ways to start with:
Separation of Style and Content
Before the world of content management systems like WordPress, you had to meticulously write codes to get a web browser to display your content in a visually appealing and user-friendly way. This was time-consuming. Those codes consist of HTML where the content itself lies, CSS is about making content look a certain way, while Javascript adds interactivity to the content on the page.
Things have changed now as there is a clear separation between style and content. Here, the style and the way of presenting content are controlled by templates while the content is saved in a database. When you visit the site on the front end you can see a dynamic template with content from the database. This means you can easily change the appearance of your content without changing the content itself. You can simply change the active themes and also add plugins.
What are WordPress themes and how do they work?
A WordPress theme is a collection of templates and style sheets that reflects the appearance and display of a WordPress website. They can be changed, managed, and added from the WordPress admin area under Appearance and then Themes. You can have several free and paid WordPress themes available.
Each one comes with a different design, layout, and features. You can choose according to your requirements for the website. You can also find themes that are designed to serve specific kinds of websites, e.g. WordPress Photography Themes are designed specifically for photographers and photography websites.
Themes generally consist of three parts.
- Images, JavaScript files, and the style.css file
- WordPress template files
- An optional functions.php file that will allow changes to be made to the theme.
Every theme must have a unique style.css file.
Customizing your theme
After you select a theme for your site you can then customize it. You can personalize your theme according to your requirements by taking full advantage of the customization options available before taking it live. You can choose any other theme you like. Different themes will have different options available in the customizer. The customizer works by providing a series of options on the left-hand side. When you select them, they open contextual panels where you can make changes.
You can go to the Site Identity option. There, you can add/change the logo, title, and tagline. In your title text you can mention, what is your website about. Tag their works as a semi-title. You can even leave some fields blank and fill them up later while your SEO tasks.
Nowadays it’s important to create a website that looks good on every device. With the increase in technology and the need for a better user experience, it’s necessary to have a Website Retina Logo. There is a checkbox for the Retina logo image which is the same as the normal logo image, though twice the size. For example, if a regular logo image is 100×100 pixels in size, the retina logo image should be 200×200 pixels in size.
There is a new feature called Site Icon which is the Favicon for your site that appears on the top left corner of your Tab. It also appears when you add your site as an app on your phone or somewhere else. It must be square and at least 512 pixels wide and tall. If your logo or image is ready, you can upload it here. You can also crop the image, so if you have uploaded a large image and you want to crop it you can do so. There is a cropping tool that will always create a square. Once done, you can click on Crop Image to see the Site Icon added.
Once you are done with customizing the Site Identity you can click the back button and go to the next option which is Colors. Now the Colors Option will change dramatically depending on the theme you are using. It allows you to change things like the background color (header, footer, and body), you can also see a full Color Selector from where you can choose whatever you want. You can also choose the primary color as you want, default or custom.
After customizing Color, you can go back and move on to the next – Theme option, which has a checkbox in front of search and author. You can check or uncheck the boxes, which will display or hide the options in the front end. It also has a radio button for displaying archive pages, and posts showing full text or summaries. If you check full text it displays full content and if you check summary it displays some initial text.
You can then click on the back button and go to the next option ie. Cover Templates options. This option will be available for the page template where the cover template is selected. It allows the user to use the featured image as a background image, you can either have a fixed background or you can check on the parallax effect to make the background image move when scrolled. And you can also play with Overlay Background Color, for now, let’s select pink for the overlay background color, then select Overlay Text Color as white. You can also go through the Overlay Opacity selection options.
The next option is Background Image selection in the body. We can select images that have already been uploaded or we can upload them from any source. There is also a change or remove image option, which can be used to change or remove background images as well. We can also change the position of the background image to center/left/right. There is also an Option for Image size as full, fit to screen, and original. You can also select either Repeat Background Image or Scroll with Page option. When the image size of your background image is smaller it will either be repeated or it will scroll with the page according to the option you have selected.
After this, the next option is Menu selection. You can see different menu locations. You can add them later after creating the menu.
Another is the widget option. You will find footer 1 and footer 2 there, to which you can add different widgets that could include information about your company, contact details, and recent posts.
In the homepage Setting, you can have your homepage displayed with options, your latest posts, and a static page. Selecting your latest posts will display posts on the homepage while selecting static pages will show a Homepage with page lists. You can select any pages you desire to be displayed on the home page.
Lastly, in the additional CSS, you can add the required styles. After confirming all options you can Click on publish to take effect changes.
How to make your navigation user-friendly?
Navigation is one of the most important components of your site. Good navigation leads people where they want to go, great navigation helps people find things they didn’t know they were looking for, while bad navigation drives people away. So, how do you make great navigation? Before you make navigation, you need to know what content you have and how people would get to that content most easily.
That requires mapping out all your content on Post-it notes or in a Spreadsheet or a graphic and doing some primary user research to find out the most logical way of getting from one point to the other.
Make your site accessible from any device from different screen sizes
Getting a clear picture of a logical menu structure is not enough. You also need to make sure that your site is accessible from any device with different screen sizes. This was not a concerning issue a few years ago as the only medium of viewing websites used to be desktops. But now, people use several devices like laptops, smartphones, or tablets. With that comes new challenges. Dropdown menus don’t work well, or sometimes it doesn’t work at all on touchscreen devices. With a small screen size, you don’t have room for gigantic dropdown menus anymore. A lot of these issues can be resolved by using a theme that takes a mobile-first approach to web design and provides proper mobile-ready menus.
Creating a menu that makes sense to your users, is up to you. It is very important to make your menu as simple as possible. Maybe make it a single-level accessible menu. If you have a lot of items, you can either condense them into groups or make navigation easier – either by creating subpages or by adding menus to the sidebars.
Creating and customizing menus
You can create custom menus using Customizer. To create a new menu, simply click Menus. This will open the Menu Customizer. And from there you can create new menus, and also assign specific menus to specific theme locations. You can see, WordPress themes have at least one menu area or menu location.
For example, if you open Menu Location, in the case of 2020, you will see five menu areas.
- Desktop Horizontal Menu
- Desktop Expanded Menu
- Mobile Menu
- Footer Menu
- Social Menu
These areas are predefined inside the theme. And if you create a custom menu, and assign it to the menu area, then that custom menu will appear in that area.
In most themes, the primary menu area, which is mandatory for all themes, will already consist of items like a Home button, and then all your pages in alphabetical order.
Before you create your first custom menu, you need to know about the settings. When you click it, it will lead you to the advanced menu properties from where you can decide what you want to see in the menu Customizer for each of your menu items. There you can display the Link Target, meaning where the link opens, in the same window or a different window. You can also find other options like Title Attribute, CSS Classes, Link Relationships, and also the menu Description.
Once you are ready to create the custom menu, you can click on add a new Menu and give it a name. It will appear in this header section. When you click on Create Menu, you will be taken to a new page where you can either add items or select where the menu will appear.
You can choose the menu locations in your current theme, and you can also choose if you want to automatically add new top-level pages to the menu.
The great thing about menus in WordPress is you can add any type of item you want. You can get a list of all the different types of items you can add. You can see you can create a Custom Link, which is just an URL from anywhere on the Web, and then put in the link text.
Then you can add posts. You can select any of the posts that are published on your site. You can select a page. This is also where the Home link hides. You can create links to Categories or tag archives. That means, for instance, if you go to the News section you get all the posts filed under the News category. You can create links to your post’s Formats. Once the pages have been added, you can reorganize them by simply grabbing an item and dragging and dropping it into a different location. And you can also create the parent/child relationships in your menu, essentially making drop-found items, by simply grabbing an item, and dragging it to the right. You can create many parent/child levels as you require. But most themes only support up to three levels. After you have created the structure, you can also open each of these menu items and further customize it.
Many people use their fingers to navigate sites. This is either because they have a Windows computer, or because they have a tablet or a smartphone. In those cases, there is no hover state, so this button makes way more sense for triggering drop-down behavior. Once you click on an item, you are taken to that respective page or post. You can see everything where it is exactly as you would expect from a custom menu. You will also notice that there are menu locations in this theme due to a very specific reason.
The custom menu will show up with the social media icons you will link to, rather than just text. But be sure to check if your theme supports this kind of feature.
You can add the most common social media like Facebook, Twitter, Linkedin, and Instagram. To do so you will have to create custom links. So you can just link it to http://www.facebook.com, http://www.twitter.com, http://www.linkedin.com, and http://www.instagram.com. But you have to link it to actual accounts where you want to direct your viewers. You can put in some text, and add it to Menu. And when you are done, you can assign this to the Social Menu.
The menus would specifically look like social media icons as you will customize them. So this is a really neat feature. But, if you do not want your viewers to go away from my site, you have to make sure that for each of your links, you turn on the “Open link in the new tab” option. This way, your visitors can navigate to all your social media outlets, without actually leaving the site. Once you are done, you can click Save and Publish. You can close the Customizer and then view it in the front end. You will have a custom menu with a drop-down. You also have your custom social media menu, and if you click on any of the links, you are taken directly to that link in a new tab.
Using widgets
When you scroll up and down you will have a bunch of extra pieces of content below the footer you have created. The items that you see below are known as widgets. They are little packaged programs that you can add to any widgetizedWordPressWordPress area within your site. And depending on the theme you are using you will find that you usually have widgetized areas either in the sidebar or in the footer of your site but they can be placed in other places too.
You will have an option for Widgets under the Menus. Now just like with the menus, you have Widget Areas in your theme, and depending on what theme you are using, you may have several different widget areas.
In this widget area, you can add as many widgets as you want and you can customize those widgets to do what you want. So, you will see a Search widget, a Recent Posts widget, a Recent Comments widget, an Archive widget, a Category widget, and a Meta widget, all of which show up as individual units in the sidebar. To add widgets to your widgetized area, you can click on this +Add a Widget button and you will open the list of available widgets.
Adding a widget, like the Pages widget, is as simple as clicking on it and it will appear in the footer. Whenever you add a widget you can give it a title. If you don’t give your widget a title it will usually show up with a default title, like in this case PAGES, but some widgets don’t have titles by default because you want to display them without titles, and then you can choose to add them in. You can change what a widget title says or you can translate a widget or something else. Each widget has some sort of Settings option.
For Pages, you can sort them by Title, Page Order, or Page ID. You can also set a list of pages to exclude based on IDs. Now, these settings change depending on what widget you are using. For example, the Search widget only allows you to change the Title. The Recent Posts widget allows you to define how many recent posts you want to display and also whether you want to Display the Post Date. The Recent Comments widget allows you to change the number of comments that are displayed. Similarly, the Archives allow you to display the archives as either a list, like you see here, or as a drop-down. And the same goes for the Categories. Just like with menus, if you want to move a widget from one location to another, you can simply grab it, and drag and drop it off to the location where you want it to be displayed.
There are a couple of hidden features in the customizer that are not easy to find unless you know they are there. First of all, when you are working with widgets, the page you are currently-in in the preview defines what widgetized areas are available to you. So, for example, many themes will have multiple different widgetized areas. You may, for example, have one that only appears on the front page and another that only appears on a Contact page. If you are using the customizer to customize those widgetized areas, you have to navigate to those specific pages in the preview area. You can have access to those widgetized areas as you are customizing only what you can see. So, in some cases, you may have to search a bit to find those different widgetized areas.
This chapter is explained more in detail in our tutorial videos. You can find below, the link to our WordPress Tutorial Part 7: Changing the WordPress Appearance of your Site
Tutorial in English
Tutorial in Nepali
We shall talk more about WordPress in our next tutorials and blogs.
For our video tutorials, please subscribe to our Youtube Channel TrilogyDigital Pathshala