Create a Theme Package
As stated previously, rather than using the default starter theme that we selected during the setup process (i.e.
@frontity/mars-theme) we are instead going to develop a custom theme from scratch. To do this we need to create a new package for our theme's code. As it's our first ever theme let's call our theme "my-first-theme".NOTE: Before continuing you may need to stop the dev server process that we ran previously with CONTROL+C.
To create a package run the following command in the terminal:
1
> npx frontity create-package my-first-theme
Copied!
You will be prompted to specify the namespace to use. Since you are creating a theme you can use the default
theme, so you can just press Enter at this point.
Creating a package
When the process is complete you will have a new directory called
/packages/my-first-theme. This is where we will be doing most of our work to build the theme.
Structure of a newly created package
The first thing we'll do is to remove
@frontity/mars-theme from our settings and replace it with my-first-theme.Remove the following from the file
frontity.settings.js:1
// File: /frontity.settings.js
2
3
{
4
name: "@frontity/mars-theme",
5
state: {
6
theme: {
7
menu: [
8
["Home", "/"],
9
["Nature", "/category/nature/"],
10
["Travel", "/category/travel/"],
11
["Japan", "/tag/japan/"],
12
["About Us", "/about-us/"]
13
],
14
featured: {
15
showOnList: false,
16
showOnPost: false
17
}
18
}
19
}
20
},
Copied!
And replace it with:
1
// File: /frontity.settings.js
2
3
{
4
name: "my-first-theme"
5
},
Copied!
We've now told Frontity to use our new theme rather than "mars-theme". Save the file and then run this command again:
1
> npx frontity dev
Copied!
If you see this in your browser then everything is working. Hooray! 🙌
Frontity in the browser
Last modified 8mo ago
Copy link