In regards to Magento2 theme development, or front-end Magento2, it looks more complex than it actually is – you just need to get your head around the structure, and the commands it needs to run (SSH).
When first starting with Magento2 theme development, and searching online, everything seems very complex and I think the majority of sites over-complicate it, including Magento’s guides – maybe to keep the dev barrier to entry thus costs higher… Another discussion entirely.
So this is a super simple set up guide, for beginners who are not confident with Composor, and is intended to get you started in Magento2 development as it is a great system when you know how to use it.
Step 1
Download Magento2 and upload to your server via FTP
Step 2
Go to the URL and run the set up (this will make sure your server can handle Magento2, including PHP version etc (must be 7 or above).
Step 3
Once installed, get Putty (https://www.putty.org/) – you will need this as Magento2 relies on SSH commands to install extensions, refresh cache’s, re-index etc.
You will initially need to CD to your Magento2 directory via a basic SSH command, i.e. cd /var/www/vhosts/example.com/httpdocs/
Once in, you can then use some of the common commands below:
Step 4
If you have any extensions you need to add on, upload them to: app/code/
Then run the above SSH commands (install, upgrade, compile, flush cache).
Step 5
Download this simple boilerplate.
Change anything you need to change, then enable the theme via Magento2 admin panel (see apply a theme): devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
Like Magento 1, Magento2 works via templates that can be copied from the core into your theme, and over-ridden. This is a useful resource to see the structure, and copy into your theme when/if you want to over-ride something: github.com/magento/magento2/tree/2.2-develop/app/code/Magento
So for example, if I wanted to make a change to the catalog list.phtml, I would copy list.phtml from: github.com/magento/magento2/tree/2.2-develop/app/code/Magento/Catalog/view/frontend/templates/product and put it in my theme as app/design/frontend/Magento/theme-name/Magento_Catalog/templates/product/list.phtml
Also like Magento 1, Magento2 uses XML layouts so you can also use these layouts to change elements – specifically the product view page which has no .phtml template in Magento2. So instead, all changes need to be made via: app/design/frontend/Magento/theme-name/Magento_Catalog/layout/catalog_category_view.xml
I have uploaded an example layout file here which is basic, but shows things being moved around, new phtml elements being added in, removed etc. Once you get your head around the names of blocks, columns etc, it’s quite simple.
—
So that’s a quick start guide to Magento2 – it is, however, an extensive system and note this is a very basic guide, but hopefully will give you an idea of how to get started on it.
If you would like further info drop me a call on 0161 398 0303 or an email ([email protected]) and I can send you some more code examples.
