Category Archives: Beginners Tutorial Guides

A Beginners guide: Creating your first Magento 2 Theme


Following on from my last article entitled “creating your First Magento 2 Module” in the series of guides, in this guide I’m going show you the basics for creating a new theme in Magento 2. The theme as per the previous post won’t “do” much other than to demonstrate the basics of what is required for a new theme.

First up – we’re not going to create a new theme, we’re going “extend” one of Magento’s out-of-the-box themes. This is the more normal and fastest approach. Magento ships with two themes out-of-the-box; Blank and Luma.

If you have never had any dealings with Magento previously and are just learning, then I’d highly recommend installing Magento with its sample data and using the “Luma” theme to learn with.

So, without delaying any further, let’s get started creating our new theme.

Directory Structures

On the command line login and navigate to your Magento Application root directory. When in there create the following directories:

  • app/design/frontend/Johnadavies
  • app/design/frontend/Johnadavies/Demo

Replace “Johnadavies” with your company name and replace “Demo” with whatever you’d like your package to be called.

Standing on the shoulders of Giants

We’re going to start by basing our “new” theme off the “Luma” theme. In reality, for anything more than basic we’re probably more likely to base it off the “blank” theme.

In your newly created theme package directory we need to tell Magento a little more about our theme. So we need to create a file called app/design/frontend/Johnadavies/Demo/theme.xml and inside the file we place the following code:

<theme xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Johns Demo Theme</title> <!-- your theme's name -->
    <parent>Magento/luma</parent> <!-- this tells Magento the parent theme to base it off -->

If you want to do things properly you can also add an extra line underneath the parent tag to show a nice little preview image in the admin area.

<theme xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Johns Demo Theme</title> <!-- your theme's name -->
    <parent>Magento/luma</parent> <!-- this tells Magento the parent theme to base it off -->
      <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->

Registering our Theme

As per my blog on creating a custom module, we need to again “register” our new code with Magento, we do this by creating a new file called app/design/frontend/Johnadavies/Demo/registration.php and adding the following code.

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Johnadavies/Demo', __DIR__);

This just tells Magento how we’re going to refer to it.

Once this is completed, you should be able to navigate to “Content” > “Design configuration” in the admin area:

From here in the “action” column you change the “Applied Theme” to your new theme and hit save.

Congratulations – you now have a new theme.

Please check the next article in the series on what to do next. How to apply CSS updates and Template changes.

A Beginners guide: Creating your first Magento 2 Module


In this series of guides, I am going to show you how to get started customising Magento 2 for your exact requirements.

The whole of Magento is comprised of “modules”. These are custom units of functionality that are added to the framework. Examples of these units are:

  • CMS (module-cms) – basic CMS functionality that allows a user to create static pages.
  • Catalog (module-catalog) – this is related to all functionality for Product and Product Category management
  • Inventory (module-inventory) – this relates to inventory management for Products
  • Theme (module-theme) – controls functionality for the theme, refer to this for when creating custom themes.

For the full list of Magento core modules, this can be found in /vendor/magento. So, when we want to consider customising Magento’s core functionality we can use this folder to refer to. Please note – we must never make changes to any code in here.

In this guide, I’m going to show you how to create the basic Skeleton for a Module.

Step 1. Create the required Directory Structures

Using the command line, navigate to the root directory of your Magento installation and create the following folders:

  • app/code/Johnadavies
  • app/code/Johnadavies/Demo
  • app/code/Johnadavies/Demo/etc

Replace “Johnadavies” with the name of your company and “Demo” with an appropriate name for the new functionality you’re introducing such as “Postcode” if you were creating a module for custom handling Postcodes.

Step 2. Let Magento know of your Module.

In app/code/Johnadavies/Demo/etc create file called module.xml and place the following code in it.

<?xml version="1.0"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
     <module name="Johnadavies_Demo" setup_version="0.0.1">

In future you will probably need to add to this depending on what you’re module is going to do.

Next we need to create a file called /app/codeJohnadavies/Demo/registration.php



This file tells Magento how your new module should be referred to.

Step 3. Activate your Module

Finally go to the root of your Magento site on the command line and run the following command.

$php bin/magento setup:upgrade

This makes Magento become aware of your new module. To see if its worked simply go to /app/etc/confi.php and open it, in there you should see a line that looks like this:

'Johnadavies_Demo' => 1,

Congratulations – your new Magento Module is Active!

Your new module is now active and running! (although not doing anything 😉 )

A Beginners guide: Installing Magento 2.4

In this guide, I will just show you the quick basics to get your Magento site up and running.

Check your Server Requirements

Before we start, ensure that your server meets the requirements set up here:

As per the devdocs for Magento 2.4, you must also install Elasticsearch prior to installing Magento see this guide on how to do this.

Install Composer

Magento 2+ use Composer for dependency management, this allows modules (and Magento) to be installed and managed. So, you need to have Composer installed

Authentication Keys

Create or Login to your Magento account (

and then navigate to “marketplace” > “Access Keys”

Create a new set of access keys and make a note of the Public and Private Keys. The “Public Key” will be our “Username” and the “private key” will be our “Password”.

Download Magento!

Navigate to the directory, using SSH, where you want Magento to be installed and enter the following command.

composer create-project --repository-url= magento/project-community-edition .

The “.” at the end installs it in the current directory, but you can adjust this to wherever you want.

When requested for a username and password, simply use the one in “Authentication Keys” in the previous step.

Set the Permissions

As per the devdocs you should set permissions like this:

cd /var/www/html/<magento install directory>
find var generated vendor pub/static pub/media app/etc -type f -exec chmod g+w {} +
find var generated vendor pub/static pub/media app/etc -type d -exec chmod g+ws {} +
chown -R :www-data . # Ubuntu
chmod u+x bin/magento

Install Magento!

Now that Magento is downloaded we finally need to install it by running this following command:

bin/magento setup:install \
--base-url= \
--db-host=localhost \
--db-name=some_database_name \
--db-user=some_database_user \
--db-password=some_database_password \
--admin-firstname=a_firstname \
--admin-lastname=a_lastname \ \
--admin-user=dont_use_admin_for_a_name \
--admin-password=dont_use_admin123 \
--language=en_GB \
--currency=GBP \
--timezone=Europe/London \