Submodule 15.2: Theme – New page

Theming your blog-site

What is a theme?

A theme is what controls the design or appearance of your site. You can adjust the colors, the fonts or the layout of your page (columns etc.) 

Using themes we separate the structure/content of our site from the appearance.

Let's jump into action!

Setting up the preferable theme

You are able to use any theme that you like. However, for the purposes of this course, it would be better if we all use the same theme. If you agree, search to find the twenty sixteen theme and activate it. Explore the public view of this theme.

The navigation bar

The navigation bar is not visible on all themes. This happens because each theme has different bar locations.

In our theme, the navigation bar is visible. However, we will see how we could make it visible if we had a different theme.

The Primary menu usually locates the navigation bar up towards the top of the page and the Social menu down towards the footer.

Note that you can reorder, remove and reappear a page and you can create submenus (subpages).

Modifying colors and fonts

We can do small changes. 

Site identity

We can modify the site identity and add a logo image if we want.

Header image

We can upload a header image. This theme works best with an image with a header size of 1200 × 280 pixels 

Exercise

Modify your theme:

• Colors
• Fonts
• Header image (optional)

New page - The HTML editor

Let's create a new page and add it to the menu.

We will try to recreate the Choco Home of our "Chocolate site". 

Create the page and add it to the navigation bar

Insert text

We will try to copy and paste our HTML code into the WordPress' HTML editor

As you can see the HTML tags are recognized from WordPress HTML editor in Visual mode. However, they appeared different on the page. This should be because WordPress has its own CSS which overrides the default rules.

Insert image

• We should first upload our chocolatethings.jpg to our blog-site

Description is the longdesc attribute that specifies a hyperlink to a detailed description of an image.

• after successfully upload the image, we will embed it into our Choco Homepage, by Using the tag <img>

In the next video, we will see how we can insert an image as media or Featured image

Link image 

Exercise

Create in your site a new page. You have to incude:

• Text
• A link to an external site
• An image

After creating the page, you have to make this page appear in the Navigation bar