Build Your Own Business Website header image

Customizing the Appearance of your WordPress Site

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now we’re going to move on to customizing the appearance of your WordPress 4.7 site. This is the 2017 theme that I have not yet modified in any way. This is not my content, this comes with the theme but here’s my content. I’ve got what we imported, so this side salad avocado post and its picture and then the next post and it’s picture and so on.

Themes Change Both Site Appearance and Layout

What you see here and the layout, those are all elements of the Theme. But if we were to come over here change themes this would look entirely different. Let’s do that. Come over here to Themes and instead I’ll activate 2015 Theme. Now you can see the site looks entirely different but the only change I made was to change themes. It’s got the same content but the content is set up differently.

Let’s go to my Settings and Reading Settings. There’s my front page and news is my blog post page. We’ll save that change and reload this. So that’s what this site looks like in 2015.

Let’s go back over to Appearance and Themes change it to 2016 Theme. Activate it and here’s the 2016 theme. Once again it looks a fair bit different. I’ll click on one of the items in the category widget. It’s not showing any of those images even though all those images are there. Let’s go over to the image, it’s not showing them there either interestingly.

Let’s just look to make sure that we have a featured image here. We do, we’ve got a featured image but the 2016 theme simply doesn’t use featured images. The only image it’s ever going to show is an image that you embedded directly into the text. Let’s just check that and open another one here. We’ll open the Summertime Blues image. Update, view the post and now it is using the image. So this is the way it’s using the featured image rather than some other system for displaying the featured image.

Let’s take a look at another one. Here’s the 2014 theme. Let’s see what happens in live preview here with our content. It does show images like that and it centers the text over the top of the image a little bit in those. Then if we look at one of these, what it does is it takes this first image and it pushes off to the side and then it lines up the rest of them under. In any case, it’s an entirely different way of looking at everything.

Themes Have Different SEO and HTML Functionality

The point of this exercise is that while the content remained the same, it is being displayed in different ways depending upon how the theme is set up. And that’s what a theme does. It is a way of styling the display of your content. And not just styling but it adds necessary search engine optimization and HTML functionality that isn’t seen by anybody other than search engines.

In particular, the theme will add different types of HTML. It will add different HTML attributes. It may add Schema and things like that which are not are not present in your content and are not seen by anybody unless they view the original HTML source. The theme adds these attributes to help present your content and in particular present your content to search engines. So it’s not just what it looks like but it’s also how the content is presented.

Let’s inspect this so we can see the HTML source. No, the 2014 theme is not adding any kind of Schema at all. It is using html5 and using html5 elements that make it clearer what is main site content and what isn’t. For example, this is primary and then down here is article as an html5 element rather than say, divs but but it didn’t add any Schema for the article or for the image. It didn’t add in the Schema of the title.

But I’m guessing that the 2017 Theme must. It would be unconscionable of them not to do that with 2017. Let’s take a look at the HTML source. Inspect that. Look at that, there is no schema implementing 2017. I didn’t see that coming.

On the other hand, if you’re looking in the Thesis Theme, it does implement Schema. You have article and then you’ve got item scope and the item property of Schema article. You’ve got your h1 class headline, itemprop headline. You’ve got your post content with the article body. This doesn’t have a date so that doesn’t pop up there but there are other places where dates and that kind of content will show up.

None of this information is actually embedded in this content. That Schema information is being worked into the presentation of a content by the theme.

What is Schema?

Somebody is asking “What is schema?” Let’s take a quick aside to schema.org.

HTML Markup for Search Engines

Schema is a way of adding markup to the HTML of your website that helps search engines understand what the page is about. It breaks down types of content, it tells us whether it’s an article or creative work or it’s a video or an audio or whatever.

It adds information to all the elements of a page so that when it’s being indexed by Google or Bing or another search engine they can determine what the content is and where it should be displayed, what kind of a search your page will be relevant for.

Important for SEO

Before Schema, Google had to read all the text on the page and then decide what the most important text is and what is the page about.

Now with Schema, the search engine can use the markup to tell what is happening on the page. It’s the new important part of web development that improves your search engine standing and your search engine ranking and whether or not your pages get displayed in search results. Schema helps with all of that.

Schema isn’t generally something you have to focus on yourself. The best WordPress themes let you customize it to a certain extent. For example my Agility skin for Thesis theme gives you the opportunity to set up sort of a default Schema for each of your post types. Then when you’re in those posts it gives you the choice of deciding on a page by page or post by post basis which kind of schema you want to use.

It’ll either use the default that you’ve set up or allows you to come in and make a choice. For example, let’s say you’ve got a recipe here. Well, Google looks at recipes way different than they look at other webpages or events.

I want to make one final point about themes. One of the things that doesn’t change when you change your theme is your content, right? Your page title doesn’t change, your images that you’ve embedded don’t change, the text itself doesn’t change, the menus you have put together don’t change. You know the content itself doesn’t change when you change themes, that’s the takeaway – the style changes but the fundamental content doesn’t change.

0 Comments… add one
0 comments… add one

Leave a Comment