How to create a responsive theme or template from scratch for WordPress

How to create a responsive theme or template from scratch for WordPress

The initial pillars of web design are HTML, CSS and PHP. You may not feel like you have the ability to create a responsive WordPress template, but with the necessary knowledge, you will be able to make your own theme from scratch.

Designing a theme can be the solution to a specific problem. That is if your page requires a theme that is not available in the WordPress catalog, the one you design will be adapted to your needs and you will also have a unique design

What is a responsive design?

A responsive design is one that adapts to any screen. It does not matter if the website is viewed from a PC monitor or from a mobile phone, the content is distributed in such a way that no information is lost.

How to create a responsive theme or template from scratch for WordPress

Responsive design is extremely important today, taking into account that more and more users are using mobile devices to view content on the web. If the content cannot be readable, the user automatically exits the site.

What do you need to create a template in WordPress?

To create a template, system or website, the fundamental thing is to have a plan. The approach and analysis of the creation of the theme will save you a lot of headaches in the process.

  • WordPress installation. It can be used locally together with an application like Mamp Server or installed on your hosting.
  • In case the WordPress installation is in a hosting, an application will be necessary to be able to access by FTP.
  • Text editor, among the most popular, is Notepad.

Folder structure

A WordPress theme is made up of CSS, JS, PHP files, images, among other things. But the base is two files, the one called index.php which is the initial page and the style.css file, which is the style sheet (appearance) of the web.

For web development to be optimal it must be structured and have a folder system that separates the different types of files. In the root folder of the theme put the index and create the following group of folders:

  • css:  stylesheets
  • img: images in PNG, JPG or GIF format
  • js: for JavaScript files
  • fonts: all fonts for the theme
  • inc: auxiliary .php files
Read:  How to do the double exposure effect in Photoshop

Create the responsive template

How to create a responsive theme or template from scratch for WordPress

The style sheet (styles.css) is essential in this process. This is where the rules of how the content should go (size of objects, shape and color) and when it changes according to circumstances are indicated.

For example, to adjust the size of an image, modify the width attribute. Instead of placing a fixed value such as 800px, the value is placed at 100% and the height is set as a value to automatic.

  • @media (min-width: 800px) {
    body {
    align: 15px;
    }

In this way the image is adjusted to the maximum width available, depending on the screen. This same formula applies to the divs on the page, instead of placing a fixed value, the width property is set with percentages.

Media Queries

CSS3 offers a powerful tool called Media Queries or media queries. Determine what type of medium is being used to display the web page and determine which style rules to apply.

In short, it is a custom CSS and quite specific for each device and web browser. Its functions are chained with the use of the @media keyword. 

  • @media (min-width: 800px) {
    body {
    align: 15px;
    }

In the previous example, it is being indicated in the style sheet that for devices with dimensions of 800px onwards, that style will be applied to the body of the page.

This type of layout is also often used to define the style, depending on the orientation . That is if the mobile phone screen is horizontally or vertically. The ideal is to combine the media queries together with the rule of the dimensions of the elements to create a website that fits each device.