Magento uses a special file extension for template files that uses the .phtml extension. You can think of PHTML files as PHP files that mainly output HTML. But rather than needing to use standard PHP for loops, conditionals, and other rendering logic, Magento’s PHTML format supplies some syntactic sugar to display this presentational data. This adds an easier way to call this PHP logic in these template files.

This represents the V of Magento’s MVC layer, which is the view.

Template file location

All files related to a specific Magento module and the presentational layer are located in a module’s view directory. Within this directory, we can again choose either frontend or adminhtml, whether we are dealing with the frontend of Magento or the admin area. Since we’re strictly dealing with the frontend, we will create a frontend directory within the view directory.

And these PHTML templates reside in a templates subdirectory of this area, which gives us the full path of view/frontend/templates.

app/code/Macademy/Jumpstart/view/frontend/templates/

Create the template file

Within the templates directory is where our PHTML template files will be stored. Let’s create a new PHTML template file named welcome.phtml.

app/code/Macademy/Jumpstart/view/frontend/templates/welcome.phtml

In the welcome.phtml file, we can then add the HTML to be displayed for this template. Later on we’ll dive just a bit into how to get data into this template, but for now, let’s just output “Hello world!” inside the template file within an H1 header tag:

<h1>Hello world!</h1>

Our template file is now all created, but Magento won’t display it because we haven’t told it where to render it to. Rendering is when the code actually gets turned into output that is displayed on the screen.

That’s where layout XML comes in, which we’ll cover next.