Hotaru Docs

 [həʊdɒks]

Steps to Making a Custom Theme

Designing your own Hotaru theme can be as easy or complicated as you want it to be, but you'll be glad to know there are only five template files in a Hotaru theme: footer.php, header.php, index.php, navigation.php and sidebar.php.

Plugins add further templates, but you only have to customize the ones you want to. Here are the steps to making your own theme:

Beginner

Use the same structure as the default template, but change colors and fonts.

  1. Copy the default theme folder and rename it, e.g. mycustom (or name of your choice)
  2. Open mycustom/css/style.css and edit

Novice

As above, but edit CSS files for plugins.

  1. Copy the default theme folder and rename it, e.g. mycustom
  2. Open mycustom/css/style.css and edit
  3. Move or copy the CSS files from plugin folders into mycustom/css/ and edit each file

Note: When Hotaru runs, it merges all those files into a single CSS file. The main style.css file is then read after that merged file.

Intermediate

Start with the default template then change the layout.

  1. Copy the default theme folder and rename it, e.g. mycustom
  2. Open header.php and index.php, re-label the divs and move them around
  3. Open mycustom/css/style.css (you might want to remove the default theme's reset-fonts-grids.css file)
  4. Move or copy the CSS files from plugin folders into mycustom/css/ and edit each file

Advanced

Edit plugin template files.

  1. Copy the default theme folder and rename it, e.g. mycustom
  2. Open header.php and index.php, re-label the divs and move them around
  3. Open mycustom/css/style.css (you might want to remove the default theme's reset-fonts-grids.css file)
  4. Move or copy the CSS files from plugin folders into mycustom/css/ and edit each file
  5. Move or copy the template files from plugin folders into mycustom and edit each file (More on that here: Customizing Plugin Templates)

Note: When Hotaru runs, it checks your theme folder for CSS, JavaScript and template files, and if it can't find them, it uses the ones in the plugin folders.

Additional Notes

Hotaru only merges CSS files from plugins. If you manually add something to a template that needs a separate stylesheet, you'll need to add it to your theme's <HEAD> section in your header.php template, or copy and paste the CSS into your main style.css file.

Getting StartedDesign and LayoutPlugin DevelopmentAdvanced TopicsFunction ReferenceTroubleshooting