Oops! There was an issue with the sign in. Please try again.
You have successfully signed up. You can sign in now.
Oops! There was an issue with the sign up. Please try again.
You have successfully subscribed. Please check your email to confirm.
Oops! There was an issue subscribing. Please try again.
You have successfully signed up. You can sign in now.

Installation

  1. Download the theme ZIP file
  2. Go to Design > Installed Themes
  3. Upload the ZIP file and Activate

Routes Configuration

This is required for the homepage introduction section and for the membership, tags and author pages.

  1. Unzip the theme ZIP file
  2. Go to Labs > Routes
  3. Upload the routes.yaml file on Upload Routes YAML

Homepage Introduction Configuration

  1. Go to Pages > New Page
  2. Add a title and small description to show in the homepage
  3. Open the Settings (top right corner)
  4. Ensure the page url is home
  5. Add a featured image to display (optional)
Expected result
Page configuration in Ghost

Tags Page Configuration

If you setup a homepage introduction section this step is required as a Tags button will be displayed in the homepage and the respective page needs to be created.

  1. Go to Pages > New Page
  2. Add a title (e.g. Tags)
  3. Open the Settings
  4. Ensure the page url is tags
  5. Select the Tags page template

Authors Page Configuration

  1. Go to Pages > New Page
  2. Add a title (e.g. Authors)
  3. Open the Settings
  4. Select the Authors page template

Search Configuration

  1. Go to Integrations > Add custom integration
  2. Give a name (e.g. search)
  3. Copy the Content API Key
  4. Go to Code Injection
  5. Paste the following code in the Site Footer text box
<script>
   var ghosthunter_key = "paste_your_api_key_here";
   var ghost_root_url = "/ghost/api/v2"
</script>
  1. Go to Design > Navigation
  2. Add the page names and respective links

Social Networks Configuration

Example of footer social networks

CodeWire supports all social networks that have their respective icons in the Font Awesome brands collection.

  1. Go to the Font Awesome brands collection
  2. Search for the social network you want to display
  3. Copy the exact name displayed under the icon
  4. Go to Design > Secondary Navigation
  5. Paste the name copied and add the url you want to link
Example of an icon from the Font Awesome brands collection
Pasting the icon name in the secondary navigation

Enable Members

  1. Go to Labs > Members
  2. Check Enable members

If you would like to sell premium plans:

  1. Go to Labs > Members
  2. Connect to Stripe (more information here)
  3. Go to Pages > New Page
  4. Add a title (e.g. Plans) and description
  5. Open the Settings
  6. Ensure the page url is plans
  7. Select the Plans page template

If you would like to edit the features of each membership you will need to:

  1. Open up the theme file custom-plans.jst
  2. Edit each plan-item and a circle icon to the corresponding data-features that have the feature under each plan
  3. If any text is changed, edit the translation files under /locales
<span class="icon is-medium has-text-success">
  <i class="fas fa-lg fa-check-circle"></i>
</span>
Circle icon that can be added to each plan-item

If you would not like to sell premium plans:

  1. Open up the theme file partials/site-head.jst
  2. On line 38 change plans to signup which is the page that contains the free signup form:
<a href="{{@site.url}}/signup" class="button is-link is-light is-fullwidth">
  {{{t "Sign Up"}}}
</a>

3. ZIP the theme files and upload again on Design > Installed Themes

Configure Disqus Comments

To enable Disqus create an account and register your website. Afterwards:

  1. Open up the theme file post.jst
  2. On line 97 replace codewire-1 with your website Disqus shortname
  3. 3. ZIP the theme files and upload again on Design > Installed Themes
Where you can find your Disqus shortname (also available in the browser url)
(function() {
   /* Replace 'codewire-1' with your account */
   var d = document, s = d.createElement('script');
   s.src = 'https://codewire-1.disqus.com/embed.js';
   s.setAttribute('data-timestamp', + new Date());
   (d.head || d.body).appendChild(s);
})();
Relevant code for edition in post.hbs

Posts per page

You can control how many posts are displayed per page in the homepage (not counting the featured posts), tags and authors pages by editing the package.json theme file:

"config": {
 "posts_per_page": 4
}
Line 19 in package.json

After editing ZIP the theme files and upload again on Design > Installed Themes.

Remove dark mode toggle

  1. Open up the theme file partials/site-head.jst
  2. Delete lines 55 to 59
<div id="dark-mode" class="level-item dark-mode-toggle" tabindex="0">
 <span class="icon is-medium">
  <i class="fas fa-moon fa-lg"></i>
 </span>
</div>
Lines to delete in order to remove the dark mode toggle

3. ZIP the theme files and upload again on Design > Installed Themes

Enable dark mode by default

  1. Follow the steps in the previous section
  2. Open up the theme file default.jst
  3. In line 20 remove the disabled attribute:
<link rel="stylesheet" type="text/css" href="{{asset "css/dark-mode.css"}}" id="dark-theme" disabled="disabled" />
Before
<link rel="stylesheet" type="text/css" href="{{asset "css/dark-mode.css"}}" id="dark-theme" />
After

Syntax Highlighting

CodeWire comes with Prism.js for syntax highlighting and supports all languages listed in the documentation.

The language field value will be set on the surrounding element of the code block so the syntax highlighter knows the language of the example code. You can also use the language field in the top right corner of the code block.

You can optionally display line numbers by adding line-numbers proceeded by a space to the language field.

The theme also supports different styles for terminal input and output, by specifying shell and terminal in the language field.

How to display the terminal style window

Formulas with LaTeX

For the new Koenig editor

For inline equations, simply surround the LaTex math with a backslash and parentheses: \( LaTex \).

To get a large and centred expression, surround the LaTex math with a backslash and square brackets: \[ LaTex \].

For the old Markdown editor

In Markdown, you will have to escape some of the control characters, as explained here. Usually, all that needs to be escaped are the surrounding backslashes. To get the same expressions as above, surround the LaTex with double backslashes: \\( LaTex \\) and \\[ LaTex \\].

Features Page

If you would like to create a page like the one in the demo:

  1. Go to Pages > New Page
  2. Select the plus icon
  3. Select HTML code block
  4. Copy the HTML code from the features.html file inside the theme folder.

Logo and Favicon

  1. Go to General
  2. Upload logo under Publication logo
  3. Upload favicon under Publication icon

Illustrations

If you would like to replace the illustrations or their accent colours you can go to https://undraw.co/, download new ones and replace them inside the theme folder assets/img, keeping the same file names.