{"id":89,"date":"2019-10-07T11:32:05","date_gmt":"2019-10-07T11:32:05","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/embryo\/?page_id=89"},"modified":"2019-10-15T09:45:05","modified_gmt":"2019-10-15T09:45:05","slug":"adding-new-widgets","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/embryo\/adding-new-widgets\/","title":{"rendered":"Adding New Widgets"},"content":{"rendered":"\n
Adding a new widget<\/h5>\n\n\n\n

Please follow the given steps to add a new widget in the template. We are taking an example of adding a “Blog Section” on the “Home Page Two” but you can add any widget on any of the pages in the template:\u200c<\/p>\n\n\n\n

Step 1:<\/strong> Go to src->routes->home-two<\/code> & open the index.js<\/code> file and add the widget in the file like below. You can also add some styling to it, for this you can take the reference from other pages.<\/p>\n\n\n\n

{\/ blog grid section start \/}
    < div className=\"section-pad pt-0\" >
         <div className=\"container\">
            \/\/ Add some basic styling here
            <BlogGrid \/> \/\/ Added Blog Grid Widget
         <\/div>
    <\/div ><\/pre>\n\n\n\n
and import the widget at the top of the file like other import statements:<\/p>\n\n\n\n
import BlogGrid from '..\/..\/components\/widgets\/BlogGrid3';<\/pre>\n\n\n\n
Step 2:<\/strong> Now you have to define a new state. This state is used to pass the data to the grid.<\/p>\n\n\n\n
constructor(props) {
      super(props);
      this.state = {
        ...
         blogs: null \/\/ New State Defined
      }
   }
\u200c
<\/pre>\n\n\n\n
Step 3:<\/strong> Now you have to create a function to fetch the data from your database (in our case we are fetching the data from firebase) and pass it to the state defined in above step.<\/p>\n\n\n\n
\/\/get blogs data
   getblogs() {
      const blogsRef = firebase.database().ref('blogs');
      blogsRef.on('value', (snapshot) => {
         let blogs = snapshot.val();
         this.setState({
            blogs: blogs \/\/ Set the state
         });
      });
   }<\/pre>\n\n\n\n
We need to import the firebase in our case.<\/p>\n\n\n\n
\/\/ firebase
import firebase from '..\/..\/firebase';
import 'firebase\/database';<\/pre>\n\n\n\n
Step 4:<\/strong> Call this function in the componentDidMount()<\/code> method.<\/p>\n\n\n\n
componentDidMount() {
     ...
      this.getblogs();
   }<\/pre>\n\n\n\n
Step 5: <\/strong>You have to conditionalise the return statement so that it will only return when your state have some data to show on the blog grid.<\/p>\n\n\n\n
return (
         <Fragment>
            {
               ... && this.state.blogs !== null ?
                  <div className=\"iron-home-v2-wrap\">
                     ...
                     <BlogGrid blogItems={this.state.blogs} \/><\/pre>\n\n\n\n
Once you have completed the above steps, you can now check the newly added widget on your Home Two Page like below:<\/p>\n\n\n\n
\"\"<\/figure>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n        <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Adding a new widget Please follow the given steps to add a new widget in the template. We are taking an example of adding a “Blog Section” on the “Home Page Two” but you can add any widget on any of the pages in the template:\u200c Step 1: Go to src->routes->home-two & open the index.js […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/89"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":7,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/89\/revisions\/293"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/media?parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}