Installing your first theme with Magento 2.1

Let’s assume you have the Luma [default] theme installed and it all looks OK ?

So the elephant in the room is while that’s great, I can now get my hands on a new theme with new sample data and install this instead ? You’d think that was a pretty simple exercise and while this is sort of true for themes from the Magento marketplace, as a developer it’s nice to know what is really going on here and the best way to do this is to install the theme manually !

You might think that this is a complete waste of time, but it’s not as you’ll get an understanding of what you’re really changing or adding to your Magento system/framework.

Step 1

You download or you were probably sent an e-Mail link to download the theme as a ZIP file. Let’s just say this new theme is called The Fashion Theme and you get a file called fashion.zip. So my advice would be to create a folder off your root Magento folder called /fashion and unzip this downloaded file into /fashion

A small note of caution here: The way themes [and modules] are implemented is different in Magento 2.1 compared to 2.0 which can be a cause of confusion. If you wish to see the structure of a 2.1 Theme then I suggest you visit my Github account …..[coming soon]. It’s not a big change, but they now use a file called registration.php which you need in your /app/design/frontend/Theme_vendor/Theme_name/ folder. You can tell if your Theme is 2.1 ready if it has this file. If not then you’ll need to contact the vendor or tweak it yourself.

Step 2

So you’ve now got this collection of files and some of these files may also be .zip files, which can be irritating, so also unzip these too. It is possible that there is a .zip file called something like sample_dataXXX.zip and this .zip may be password protected. The password to unzip this is almost certainly the order-number or transaction-number you were sent with the initial download e-Mail link. Of course, this will be a long set of characters and numbers just to make life hard. Copy and paste this as part of the unzip process.

And just to make this even more Russian Doll, the sample_dataXXX.zip may also have another .zip file called dataZZZ.zip which is just the .sql file for your data-import. Unzip this as well !

Step 3

If you don’t want their sample data then skip this step and steps 4, 6 and 7.

Now we have our files all unzipped and we can start to install them. The first thing to do, or I think so, is to create a new Magento database and I’m going to assume you have a tool called myPhpAdmin and you’re OK with using this. So create your new database called myfashion or any name you fancy and when it’s created you need to import the data from the .sql file [Step 2] into this new myfashion database. Please read my earlier blog about importing large .sql files if, or when, you hit this first obstacle.

Step 4 [optional]

Not really required, but just double check that all went well with the data-import and you have your new table myfashion, or your name for it, with its new 318 tables. Yeap, Magento loves a table.

Step 5

Now we come to the actual theme files, i.e. some .php and possibly some artwork – the real stuff. When you unzipped your theme you should have two folders: one called /app and maybe one called /pub. These might not be obvious when you look at the unzipped folder structure and naturally depending on how you unzipped these, they might be in sub-folders. Just have a quick folder browse and you will find them.

Just to be a little verbose here: we want to copy these folders /app and /pub [from your zip folder called /fashionmy name] up to the Magento root folder. Now, obviously Magento already has an /app and a /pub folder in its root so, and sorry for stating the obvious, we are copying i.e. adding to the root folders /app and /pub respectively.

Take your time here, be careful and make sure that you are copying /app from the /fashion zip folder to the Magento root folder, i.e. everything in the /fashion /app folder will be in the Magento root /app folder with the same folder structure. Do not end up with /app/app in your Magento root. Ditto for the /pub folder.

Sorry if that was very obvious !

Step 6 [optional]

Now for some under the hood stuff.  We want to use our new database called myfashion and not the default database you created when you probably set up Magento as a demo install etc. This has changed a bit in Magento 2.1.x and you have to open a file called app/local/env.php which is a bit like a .env on many frameworks [Laravel/CI etc.] so maybe this makes sense ?

So open this up in a sensible editor, such as Sublime or it might look a bit of a mess, and on line 23 you’ll see a reference to ‘dbname’ – just change that to myfashion or the name of your new database.

Step 7 [optional]

Now that we have the correct database in play we need to open our myfashion database in myPhpAdmin and find the table called core_config_data and you want to change the two rows with the value-named columns ‘web/unsecure/base_url’ and ‘web/secure/base_url_secure’ to your URL for your site. Let’s assume that your shop is at http://shop.vadoo.co.uk so these will simple be changed to :

web/unsecure/base_url will become http://shop.vadoo.co.uk/ and ditto for ..secure…

and one last thing is that you’ll need a root or admin user for this new database, so you’ll need to copy the record from the admin_users table from your old database to your new database – you’ll have be familiar with copying records from one db to another. I just use Export and Import with .sql files and then edit the exported .sql before I import to the new table [i.e. remove the CREATE TABLE sql statements from the generated .sql file].

STEP 8

We are now ready to give Magento a re-initialisation and this has to be done from the command line from the Magento root folder, so drop to your folder, e.g. c:\…htdocs\magento\>…

C:\...> php bin/magento setup:upgrade –-keep-generated

C:\...> php bin/magento setup:static-content:deploy en_GB

The above may take some time and when finished, as I always like to do with Magento, I rebuild the indexes and cache [see earlier post Magento Useful...].

Note that you should use the en_GB or Magento will always deploy to the en_US folder which is a pain. Do both, i.e. run it twice: once with en_GB and with en_US to be safe.

Step 8

Now you can fire up you Magento Admin Panel as you did before, e.g. shop.vadoo.co.uk/admin [did you remember to create the admin user Step 7 if you created a fresh database] and then you need to choose the Content -> Configuration option and set your Main Website theme to your new one; followed by the ubiquitous Rebuild Cache. This new myfashion database will be set to all the defaults, but this is probably a good thing as I’m assuming after your first Luma try-out this will be a fresh start and your real store.

Final Word

As I stressed from the outset, this is not the only way to install a new theme and may be overly complex, but it does hopefully give you a little look at what is going on behind the scenes with a Magento Theme and to a degree the database being used by a particular framework install.

I appreciate that this sort of back-door install is not everyone’s cup of tea, but this type of background knowledge is very useful when things don’t work or don’t appear to.

Visit: http://shop.vadoo.co.uk for the result of this and I am naturally happy to install a theme [modest fee] for you remotely if you are experiencing problems.

 

 

 

 

 

 

Leave a reply:

Your email address will not be published.

Site Footer