Category: Blog,Wordpress

How to make a WordPress theme – Part 1

In this course, we will show you how to create a WordPress theme from HTML to serve as our portfolio and blog site. The existing html template is available at http://theme.webcoursesshowcase.com/ and you can refer to it as we build the theme. You can download the theme here: https://www.webcoursesbangkok.com/wp-content/uploads/2015/10/simple-portfolio.zip We are assuming that you already have a local development environment in place and have already installed WordPress locally. Now that you have WordPress up and running on your local machine, … Read More

READ MORE

Category: Blog,Wordpress

How to make a WordPress theme – Part 2

To create a WordPress theme, the next thing we would like to do with our theme is to edit the functions.php file. Currently, the maximum content width is set to 640px but our full-width design asks for wider content and it is a good idea to change 640 to 900. This ensures that no content will be wider than 900px in our theme. Next we have theme support for post formats, but since we don’t need most … Read More

READ MORE

Category: Blog,Wordpress

How to make a WordPress theme – Part 3

In this WordPress theme tutorial, before we actually begin styling the header, we need to set the width of our page layout and center the main container that holds all our content. In the case of Underscores, we are talking about the div with the id of “page”. Let us scroll to the end of the Typography section in our stylesheet and add the following code: What this code does is to apply a white background to … Read More

READ MORE

Category: Blog,Wordpress

How to make a WordPress theme – Part 4

Continuing our tutorial on how to make a WordPress theme: Now that the rest of the header is complete, it is time to style the menu. Underscores already comes with a responsive menu, and if we reduce the screen width, the menu is replaced with a single “Primary Menu” button. When you click it, the menu expands, and this is all handled with JavaScript and CSS. Although the menu can be assigned from the WordPress dashboard, it … Read More

READ MORE

Category: Blog,Wordpress

How to make a WordPress theme – Part 5

Although we already have a responsive menu, we are not quite done with it yet. As we reduce the width of the screen to 37.5em, Underscores automatically swaps our menu for a mobile menu, using media query we already examined in the previous lesson. Then, when you click on the button, JavaScript kicks in and displays our mobile menu. The problem that we have here is that our menu works just in the same way our full-width … Read More

READ MORE

Category: Blog,Wordpress

How to make a WordPress theme – Part 6

Now that our header is complete, it is time to focus on the main section of our theme. Immediately after the header is the content section of our theme, and the first thing we notice when we start working with it is that it displays a large featured image. In fact, most of our pages, “Home”, “About”, “Services”, “Portfolio”, start with a large featured image that in WordPress lives separately from our main content and is called … Read More

READ MORE

Category: Blog,Wordpress

How to make a WordPress theme – Part 7

One of the main features of WordPress is that it supports custom page templates, and you can add as many as you want, whenever you want. If you right click on our front page and expect an element, you can see that our body tag has a class of “page” applied to it. That means that we can apply styles to pages by targeting this class. A common request for a WordPress theme is the creation of … Read More

READ MORE

Category: Blog,Wordpress

How to make a WordPress theme – Part 8

It is time to style the front page template you previously created and add the large featured image we have in our design just below the main menu. If you examine this template, you will see that it makes a call to the content-page.php template through this line of code: It means that we will have to work with this template as well. Open it, as this is where we will place our featured image. The way … Read More

READ MORE

Category: Blog,Wordpress

How to make a WordPress theme – Part 9

The only thing that we need to do for our front page template is to style the footer and add an optional social menu with Google and Facebook icons. The screenshot below is our starting point: The first thing that I would like to do is to create a new “Footer” section in our style.css file, just below the “Header” section, and add some styles. I’ll actually transfer the “Footer” section of content.css to style.css. The reason … Read More

READ MORE

Category: Blog,Wordpress

How to make a WordPress theme – Part 10

Now that our front page template we called Home Page is complete, it is time to style the rest of the pages. Let us start with the About and Services pages. Although we can create new templates for these pages by copying our existing page-home.php template and renaming the new templates page-about.php and page-services.php, should we really do it when they are not different than our Home Page template? As you see, the only difference between them … Read More

READ MORE