Help editing Frontity Chakra Theme

🙋Get Help
#1

Hi there,

I’m new to Frontity and trying to learn what is happening, but am having a hard time finding my way. I know once I have a better understanding I can start rolling the ball.

The theme I’m trying to edit is Frontity Chakra Theme.

I want to control which three posts show on the homepage, and possibly get rid of the latest posts section below the fold and replace it with something else.

You can see a demo of the theme here:

And the code can be found here:

How can I manually set which three posts show above the fold? Thanks for any/all direction!

wr,

#2

Hi @hudson.atwell

Welcome to the Frontity community.

You’re jumping in at the deep end :smile:. Chakra theme is quite a complex theme, so if you’re having a hard time finding your way around it might be an idea to start with mars-theme, say, and get to understand some of the concepts surrounding Frontity by experimenting with that, before moving on to Chakra theme.

One possible approach you could take would be to create a component for the homepage and display it conditionally if isHome is true.

If the three posts that you want to display are not in the ten most recent posts (which are fetched by default) then you will probably need to create a beforeSSR function to fetch them.

As I said earlier, if you’re new to Frontity it might be worth doing this as a P.O.C. in mars-theme, and then reimplement it in Chakra based on your learnings. Up to you. :man_shrugging:

Hope this helps.

2 Likes
#3

@mburridge

Solid leads, thank you very much : )

I’ll keep Mars Theme close to study and see if I can break through on this custom REST call. I’ll also be sure to come back once I have a better understanding of beforeSSR and update you on my progress.

Thanks again for the attention,
:raised_hands:

1 Like
#4

Hope no one minds, I’d like to keep recording my thoughts somewhere…

I’m reading about Slots and Fills and it doesn’t appear that either theme is taking advantage of the Slots and Fills core concept here: https://docs.frontity.org/learning-frontity/roots

I did a search for slot,Slot,fill,Fill and none of the variations are turning up search results in mars-theme or frontity-chakra-theme.

Maybe both themes were developed before these features were released?

Possibly I am misunderstanding the concepts?

#5

You nailed it! :hammer: :laughing:

#6

Thanks for the help @mburridge!

I was able to get better featured posts control baked into Chakra theme.

I also developed a simple permalink redirect system for it so I can replace the links to posts with links to pages if I wanted to.

I also was able to sync the header menu items to the Worpress CMS controls:

It took a lot of study but so far the going is going good :muscle:

Hope this helps others.

If I add any more features I’ll be sure to post them here so they can follow along.

3 Likes
#7

Hi @hudson.atwell

Awesome work, thanks for those. Great to see you contributing so enthusiastically to the community. Look forward to seeing what else you’re able to offer, and to seeing the results of your own projects.

2 Likes
#8

In tonight’s update I’ve added custom CSS copied from the a 3rd party plugin into the chakra theme. Commits attached to issue show the code changes:

1 Like
#9

Fixed two issues this morning:

  1. Anchor links imported from post_content were causing a 404 and not scrolling to the correct location. This was not an issue with Mars Theme.
  1. Was getting the following warning in the console logs:
2 Likes
#10

I added a way to make the homepage show the contents of a single page rather than the latest posts:

I finally pushed the updated chakra theme live (was running the mars theme).

If anyone would like to see the results of the work so far, I’d love for you to check it out (I still need to work on setting up og:tags and a rich snippet for embeds). I’ll create a new thread too in the Showcases section later:

image

Without even optimizing my images the site is scoring a 99% on GTMetrix:

image
image1920×987 309 KB

3 Likes
#11

Great job @hudson.atwell. Thanks for keeping us updated with progress of your project. Yes, please do create a thread in the Showcases section.

We look forward to seeing what you do next with Frontity.

2 Likes
#12

Latest effort: Updating Chakra UI to version 1 (https://chakra-ui.com/docs/migration)

I was having trouble with dependencies of the Chakra UI package not seeming want to support the latest version of React and this was effecting my npm install attempts.

I also renamed frontity chakra theme to forgepress theme in this latest commit, which was something I wanted to do.

Hope this helps someone!

1 Like
#13

Hi @hudson.atwell

So forgepress-theme is effectively now a fork of frontity-chakra-theme, yes? Have you considered uploading it to npmjs.com, so Frontity devs can install it with npm i forgepress-theme?

#14

100% yes, but still a handful of things to do. Like figure out the open graph stuff. I’m having fatals when I follow the docs. I think, maybe in a month or so, I’ll tackle publishing to the npm.

2 Likes
#15

Hello @hudson.atwell,

We did something similar :slight_smile: I also updated the Chakra theme to the latest version and made a pull request to their repo.

I took a quick look at your repo and the only minor thing I’d like to mention is in this file: https://github.com/ForgePress/ForgePress/blob/develop/package.json

You have a dependency of "react-spring": "^8.0.27". You might find it easier to use react-framer with Chakra as it is already dependent on it.

Cheers,
Maurice

3 Likes
#16

Nice think you @maurice.tadros I’ll try switching those around :raised_hands: