https://github.com/matthewbert86/therealmattbert
Is there a simple way I am missing to display a post category next to the author name and date? I am using the mars theme, but I have been trying to set up the list-item component to feature the category name, but I’m not having any luck.
I’m guessing I just overlooked something in the docs or in the community, but im not finding a resource for the mars theme.
Hey Matt! I’m just getting started with Frontity, but having just finished @mburridge Frontity workshop, Build a React-based Theme for WordPress with Frontity (which was a HUGE help) adding categories was the first thing I wanted to do.
I haven’t tried this with Mars, here is what I came up with using a more basic theme developed during the workshop. The core components should be similar. I posted a Gist at https://gist.github.com/badcrocodile/476468c1876157c3b8aad39e7fb0a513 but will also place here for posterity. The interesting bits are down in the Sidebar.
import React from "react";
import { connect, styled } from "frontity";
import Link from "./link";
const Post = ({ state }) => {
const data = state.source.get(state.router.link); // state.source.get('url-string')
const post = state.source[data.type][data.id]; // state.source[url-string -> type][url-string -> id] date.type is Post; data.id is Post ID
const author = state.source.author[post.author]; // state.source.author[post -> author]
return(
<div>
<h2>{post.title.rendered}!!!</h2>
<ConsoleLog>{ data }</ConsoleLog>
<ConsoleLog>{ post }</ConsoleLog>
<MainContent>
<PostInfo>
<p><strong>Posted on : </strong>{post.date}</p>
<p><strong>Author: {author.name}</strong></p>
</PostInfo>
<div dangerouslySetInnerHTML={{__html: post.content.rendered}} />
</MainContent>
<Sidebar>
{post.categories.map( category => {
const cat = state.source.category[category]
return (
<Link key={cat.id} href={cat.link}>{cat.name}</Link>
)
})}
</Sidebar>
</div>
)
}
export default connect(Post);
const ConsoleLog = ({ children }) => {
console.log(children);
return false;
};
const PostInfo = styled.div`
background-image: linear-gradient(to right, #f4f4f4, #fff);
margin-bottom: 1em;
padding: 0.5em;
border-left: 4px solid lightseagreen;
font-size: 0.8em;
& > a {
margin: 0;
}
`
const MainContent = styled.div`
width: 75%;
float: left;
`
const Sidebar = styled.div`
width: 25%;
padding: 0 2em;
float: right;
border-left: 4px solid lightgrey;
`Frontity is normalizing the data got from WordPress to assure consistency and avoid duplicity.
That’s why in Frontity state we have:
Because of this structure, getting data in Frontity is usually a “two step” process
First we need to get info about the link itself to find out the type of data in that link, the id of the specific entity, if the info is already in the state and more… We can use “state.source.get” to get this info from a link
https://docs.frontity.org/api-reference-1/wordpress-source#state-source-get
2.- With the info we got from “state.source.get” we can now get the details of the entity (a “post” for example) by directly accessing it in “state.source” using the type and the id
In case you know more about this, have a look at this Frontity Talk where we talk about this → https://www.youtube.com/watch?v=eW5xZlpcqQk&t=1073s
Se, coming back to your original question
Under the post property you have the details of the posts organized by their id’s (each property name corresponds to the ID of that post). From there you can access all the details of the posts, including the categories assigned to that post, but here you have only the ID’s
In the same way, under the category property you have the details of the categories organized by their id’s (each property name corresponds to the ID of that post). From here you can access all the details of the categories,
So you can use the ID’s got from state.post[idPost].categories to access the details of each category at state.category[idCategory]
Hope this helps!
Thank you. I will play around and dig into it and see if I can get it to work.
Thanks for sharing! I might have to just watch through that tutorial and see what I can try from scratch. I tried similar code in the mars theme and it doesnt work.
