Theme Components
This page will let you know about the theme structure and the files it must contains.
In order to create a new theme for Publish, you must follow the theme structure described below. Each file should be there to get the theme working properly. You can change the html and css of the theme as per your need. But you must strictly follow the structure.
In order to get data in your theme's twig files according to your need, please follow the SDK functions given in the document.
Learn about theme's CSS and JS dependencies
Theme Files Hierarchy
Theme Structure
- layouts
- partials
- _footer.twig
- _header.twig
- _javascript.twig
- _responsive_navigation.twig
- messages.twig
- main.twig
- partials
- article
- _disqus_comments.twig
- _popular_articles.twig
- _social_sharing.twig
- user-profile
- _recent_articles.twig
- _user_blogs.twig
- _user_followed_by.twig
- _user_following.twig
- _cta.twig
- _single-article.twig
- login-modal.twig
- static
- css
- lib
- css libraries to be put here
- index.css
- deploy
- grunch minify css and js files put here
- development
- js
- _article-templates.js
- auth.js
- common.js
- home.js
- search.js
- user-articles.js
- user-profile.js
- fonts
- Put fonts here
- images
- Images put here
- js
- ie
- ie.js
- index.js
- plugins
- All js plugins put here
- article.twig
- blog.twig
- section.twig
- contact-us.twig
- edit-profile.twig
- error.twig
- forgot-password.twig
- forgot-thanks.twig
- google-sitemap.twig
- Gruntfile.js
- index.twig
- login.twig
- my-news.twig
- package.json
- page.twig
- reset-password.twig
- reset-thanks.twig
- search.twig
- sitemap.twig
- social-user-details.twig
- thank-you.twig
- user-posts.twig
- user-profile.twig
- verify-email-thanks.twig
Files Description
| File | Description |
|---|---|
| _footer.twig | Footer template. It contains the footer code of the theme. |
| _header.twig | Header template. It contains the header code of the theme. |
| _javascript.twig | It contains all the javascript reference files. |
| _responsive_navigation.twig | Mobile navigation code goes in this file. |
| messages.twig | It contains the success or error message code. |
| main.twig | Main layout file. |
| _disqus_comments.twig | This file is used to load the discuss comments in the theme. |
| _popular_articles.twig | It is used to display the popular articles in the theme. |
| _social_sharing.twig | It is used to display the social media links. |
| _recent_articles.twig | This file is used to show users recent articles. |
| _user_blogs.twig | This file is used to show the blogs of a user. |
| _user_followed_by.twig | This file is used to the list of users following the logged in user. |
| _user_following.twig | This file is used to show the list of users followed by logged in user. |
| _cta.twig | This file is used to show the Call to Action. |
| _single-article.twig | This file is used to show the details of a single article. |
| login-modal.twig | This file is used to show the login modal to non logged in users. |
| article.twig | Single article template. This file is used to show the single system article. |
| blog.twig | Single Blog template. This file is used to show the blog details and its articles. |
| section.twig | Single Section template. This file is used to show the section details and its articles. |
| contact-us.twig | Contact us template. This file is used to show the contact form to users. |
| edit-profile.twig | Edit profile template. This file is used to show the logged in user details in a form to edit them. |
| error.twig | Error template. This file is used to show the error notifications to user. |
| forgot-password.twig | Forgot Password template. This file is used to show the forgot password form to user to recover his password. |
| forgot-thanks.twig | Forgot thanks template. This file is used to show the thank you message to the user when a mail is sent with reset password link. |
| google-sitemap.twig | This file is used to list the google sitemap of the theme. |
| Gruntfile.js | This file is used to generate minified css and js of the theme |
| index.twig | Index template. This is the main template file of the theme. |
| login.twig | Login template. This file is used to show the login page to the user. |
| my-news.twig | My news template. This file is used to show the articles of the blogs or sections that a user follows. |
| page.twig | Page template. This file is used to show the content of a page created by admin. |
| reset-password.twig | Reset password template. This file is used to show the reset password form to user. |
| reset-thanks.twig | Reset thanks template. This file is used to show the thank you message after successful password reset. |
| search.twig | Search template. This file is used to show the search results. |
| social-user-details.twig | This file is used to show signup form from social media. |
| thank-you.twig | Thank you template. This file is used to show the thank you message after successful sign up. |
| user-posts.twig | User post template. This file used to show the articles created by logged in user. |
| user-profile.twig | User profile template. This file is used to show the user profile. |
Updated about 3 years ago