How to create responsive themes or templates from scratch for WordPress

Who I am
Philippe Gloaguen

Author and references

The initial pillars of web design are HTML, CSS and PHP. You may not feel that you have the ability to create a responsive WordPress template, but with the necessary knowledge you will in degree of create your 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

How to create responsive themes or templates from scratch for WordPress

    What is responsive design?

    Responsive design is what it is suitable for any screen . It does not matter if the site is viewed from a PC monitor or from a mobile phone, the content is distributed in such a way that no information is lost.

    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 is not readable, the user automatically exits the site.

    What do you need to create a template in WordPress?

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

    • Installation of WordPress. It can be used locally together with an application such as Mamp Server or installed on your hosting.
    • In case your WordPress installation is in a hosting, an application will be required to be able to log in via FTP.
    • Text editor, among the most popular is Notepad.

    Folder structure

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

    Read How To Use Enchanted Books In Minecraft How Many Types Are There?

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

    • css: style sheets
    • image: images in PNG, JPG or GIF format
    • js: per file JavaScript
    • characters: all fonts for the theme
    • inc: auxiliary .php files

    Create the responsive model

    The stylesheet (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 given.

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

    • @media (minimum width: 800
      px ) { body {
      align: 15 px;

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

    Media query

    CSS3 offers a powerful tool called Media Queries or media queries. Determines which type of media is used to display the web page and determines which style rules to apply.

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

    • @media (minimum width: 800
      px ) { body {
      align: 15 px;

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

    Read How to Download Music, Photos and Videos from WhatsApp Web to My Windows PC or Mac?

    This type of drawing is also often used to define the style, a depending on the orientation . That is, whether the mobile phone screen is horizontally or vertically. The ideal is to combine the media queries together with the element size rule to create a website that fits every device.

    add a comment of How to create responsive themes or templates from scratch for WordPress
    Comment sent successfully! We will review it in the next few hours.