A bunch of questions! How do I make a theme?

🙋Get Help
1

I know a smidgen of React. I’m taking Wes Bos’s intro course right now. I know a bit more about Wordpress themes. My Website was made using the underscores starter theme and following a Udemy course.

First: Frontity doesn’t look anything like any react project I’ve ever seen before. It’s very strange and that’s a little confusing to me. Why is it structured different? What’s the difference between the stuff in the bundling, static, packages, mars-theme etc folders?

Second I am having a little trouble figuring out how to customize the mars-theme. I mean I know how I can change the styling (do I have to do it using emotion js? Is it not possible for me to also import css files like a normal create-react-app ? ) But how do I create new “page templates” so to speak?

I see you have Loading, List, Post, 404Page as components that get loaded conditionally based on… I assume state?

How would I add a new one?

I want to have a front page that’s separate from my blog archive etc.

Or heck, how would I load individual pages made in wordpress that aren’t in an archive?

How would I load in pages that have custom fields or ACF?

How would I load in an archive for a custom post type?

2

Okay I’ve played around with things a good bit and I think here are my main questions:

1. So how does one create a new theme and then have frontity properly select it?
I figured out this one. But I’m not super familar with npm, so I think you might consider adding something in docs about how local themes can be installed locally using npm. I’ve only ever used npm to install stuff via node_modules, and I didn’t realize it could be used to install local dev copies etc. Just a thought.

  1. How can I pull in data from Wordpress espc stuff from ACF or custom fields?

  2. How to I grab custom post types?

  3. How do I import css into js components like I would in a regular react app? (I went ahead and tried to do this and it didn’t work)

5

Sorry for the late reply.

I think that’s explained in our Learning Frontity section: https://docs.frontity.org/learning-frontity

If you don’t understand or think something is still missing, please let us know so we can improve the guide.

That’s right, the recommended way is to use emotion. You can import global CSS if necessary but the recommendation is to avoid it as much as possible. More info about styling here: https://docs.frontity.org/learning-frontity/styles

Yes, that’s right.

The easiest way is to create a new page, post or category in your WordPress. Then, navigate to that URL.

If you want to create a new URL that doesn’t exist in WordPress, you can either:

  • Create that page in WP so it doesn’t 404.
  • Create a handler for that URL (example here).

Then, if you want to create a new React component for that page, the recommended approach is:

const SignUp = () => <div>My Sign Up page!</div>;

const Theme = ({ state }) => {
  const data = state.source.get(state.router.link);

  return (
    <>
      ...
      <Body>
        {(data.isFetching && <Loading />) ||
          (state.router.link === "/sign-up/" && <SignUp />) ||
          (data.isArchive && <List />) ||
          (data.isPostType && <Post />) ||
          (data.is404 && <Page404 />)}
      </Body>
    </>
  );
};

This is an example:

wp-source supports it through the homepage and postsPage settings:
https://docs.frontity.org/api-reference-1/wordpress-source#state-source-homepage

Just visiting their URLs :slight_smile:

You just need to expose the custom fields in the REST API.

For ACF, that’s made with a plugin: https://wordpress.org/plugins/acf-to-rest-api/
For other custom fields, you’d need to either add them yourself or use a plugin like https://wordpress.org/plugins/wp-rest-api-controller/

Once they are in the REST API response, you’ll be able to access them in Frontity, just like you access the title or content.

That’s something we are working on right now. It’s going to be done with wp-source settings. We expect to have it ready next week.

Absolutley. We also want to release several frontity commands to deal with local packages: npx frontity install-package, npx frontity update-package and npx-frontity rename-package.

7

Ah okay yeah I see now. That’s a little disappointing. I checked the documentation’s linked article on migrating from SCSS to styled components but I’m still not super happy with the alternative markup because it seems to be a much more round about way of dealing with this. I get the need to code split and serve the CSS on a per component basis but I hoped that could at least have been done in the standard React way in which scss is written like normal and then imported on a per component basis. That normally works with a normal create-react-app but in this case it isn’t working and I’m not clear why.

Thanks for the help!

1 Like
8

We’ve finally released support for custom post types and custom taxonomies :slight_smile:

9

Awesome! That’s great to hear. I also actually convinced my new job to allow me to use Frontity for my first solo project so I’ll probably be around a lot for at leas the next month.

3 Likes
10

Complete newbie here.
How did you figure this one out?
I want to make my own theme, so that it’s not called “mars-theme”
I’ve copied the mars-theme folders, and renamed them to “mytheme-theme” for example. I’ve updated all references.
Nope… need to install in npm.
But how?
This is not very clear at all…

I don’t really want “mars-theme” in all my pages. I’d rather have my own.

Thanks

11

Hello @al1 and welcome to the Community.

First of all, thanks for your feedback. We know that our docs still don’t cover some important topics like the one you mention. Good news are that we are actively working on improving them so this should be fixed soon.

In any case, regarding how to create your own theme, we wrote a blog post not long ago that might be helpful: https://frontity.org/blog/how-to-create-a-react-theme-in-30-minutes/

Please let us know how it goes or if you need help with anything else :blush:

2 Likes
12

@al1 right now renaming a package is a bit of a manual process. You can see the steps on Rename mars-theme to a new name

In the future, we want to release a npx frontity install-package command that will ask you what name do you want to use (or preserve the original name).

1 Like