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

FileDescription
_footer.twigFooter template. It contains the footer code of the theme.
_header.twigHeader template. It contains the header code of the theme.
_javascript.twigIt contains all the javascript reference files.
_responsive_navigation.twigMobile navigation code goes in this file.
messages.twigIt contains the success or error message code.
main.twigMain layout file.
_disqus_comments.twigThis file is used to load the discuss comments in the theme.
_popular_articles.twigIt is used to display the popular articles in the theme.
_social_sharing.twigIt is used to display the social media links.
_recent_articles.twigThis file is used to show users recent articles.
_user_blogs.twigThis file is used to show the blogs of a user.
_user_followed_by.twigThis file is used to the list of users following the logged in user.
_user_following.twigThis file is used to show the list of users followed by logged in user.
_cta.twigThis file is used to show the Call to Action.
_single-article.twigThis file is used to show the details of a single article.
login-modal.twigThis file is used to show the login modal to non logged in users.
article.twigSingle article template. This file is used to show the single system article.
blog.twigSingle Blog template. This file is used to show the blog details and its articles.
section.twigSingle Section template. This file is used to show the section details and its articles.
contact-us.twigContact us template. This file is used to show the contact form to users.
edit-profile.twigEdit profile template. This file is used to show the logged in user details in a form to edit them.
error.twigError template. This file is used to show the error notifications to user.
forgot-password.twigForgot Password template. This file is used to show the forgot password form to user to recover his password.
forgot-thanks.twigForgot 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.twigThis file is used to list the google sitemap of the theme.
Gruntfile.jsThis file is used to generate minified css and js of the theme
index.twigIndex template. This is the main template file of the theme.
login.twigLogin template. This file is used to show the login page to the user.
my-news.twigMy news template. This file is used to show the articles of the blogs or sections that a user follows.
page.twigPage template. This file is used to show the content of a page created by admin.
reset-password.twigReset password template. This file is used to show the reset password form to user.
reset-thanks.twigReset thanks template. This file is used to show the thank you message after successful password reset.
search.twigSearch template. This file is used to show the search results.
social-user-details.twigThis file is used to show signup form from social media.
thank-you.twigThank you template. This file is used to show the thank you message after successful sign up.
user-posts.twigUser post template. This file used to show the articles created by logged in user.
user-profile.twigUser profile template. This file is used to show the user profile.