How to make a child theme

Hi!

My parent theme is Healt Sciences and my OJS is 3.1.1.4.
I’ve uploaded to /plugins/themes the default child theme folder and renanamed it to healthSciencesChild.
At this folder i’ve replaced at index.php and at versions.xml the references to “default” to “healthSciences”.
The DefaultChildThemePlugin.inc.php file was renamed to healthSciencesChildThemePlugin.inc.php and i’ve made the replacements as done in index.php and versions.xml
Whats hapenning:
At settings > website > plugins the theme is there but its name is “##plugins.themes.healthsciences-child.name##”.
I’m able to enable it, but it isn’t available at the dropdown box at settings > website > appearence.

Could someone please tell me what i’m doing wrong?
Thanks!

1 Like

Hi cembra,

I’ve only begun to learn how to create my first child theme over the past few days so I can’t offer very knowledgeable help. But I’ve managed to get a basic child theme working so I can at least tell you how I got mine started.

First of all, have you updated the Health Sciences theme to the latest version? It looks as though a bugfix was recently published.

Next, do I understand that you’ve been renaming and changing files in the “default child theme folder”? Unless I’m very mistaken, the folder you’re talking about isn’t meant to serve as a location for any new child theme; “defaultChild” is just the name of a theme. It’s probably better to put the files for your own child theme in its own path:

plugins/themes/healthsciences-child

If so, then here’s what (I think) you need to have in these files in that directory:

healthscienceschild/index.php:

<?php
       require_once('healthSciencesChildThemePlugin.inc.php');`
       return new healthSciencesChildThemePlugin();
?>

healthscienceschild/healthSciencesChildThemePlugin.php:

<?php
import('lib.pkp.classes.plugins.ThemePlugin');
class healthSciencesChildThemePlugin extends ThemePlugin {
	public function init() {
		$this->setParent('healthsciencesthemeplugin');
	}
	function getDisplayName() {
		return __('plugins.themes.healthscienceschild.name');
	}

	function getDescription() {
		return __('plugins.themes.healthscienceschild.description');
	}
}
?>

healthscienceschild/version.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE version SYSTEM "../../../lib/pkp/dtd/pluginVersion.dtd">
<version>
	<!-- The application should match the theme folder to ensure it is unique -->
	<application>healthscienceschild</application>
	<type>plugins.themes</type>
	<release>0.0.0.1</release>
	<date>2019-03-28</date>
	<lazy-load>0</lazy-load>
	<!-- The class name of the plugin. See index.php -->
	<class>healthSciencesChildThemePlugin</class>
</version>

I don’t know what locale you’re working with, but you can replace en_US with yours:

healthscienceschild/locale/en_US/locale.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE locale SYSTEM "../../../../../lib/pkp/dtd/locale.dtd">
 <locale name="en_US" full_name="U.S. English">
 	<message key="plugins.themes.healthscienceschild.name">Health Sciences Child Theme</message>
 	<message key="plugins.themes.healthscienceschild.description">A description for the Health Sciences Child Theme</message>
 </locale>
1 Like

what you are telling is (almost) what i’ve done, so i’ll try to be more clear:

  • i have a folder at plugins/themes named “healthSciencesChild”

  • inside that folder i have 3 files: index.php, version.xml and healthSciencesChildThemePlugin.inc.php

  • the content of healthSciencesChildThemePlugin.inc.php is:

      <?php
    
      import('lib.pkp.classes.plugins.ThemePlugin');
    
      class healthSciencesChildThemePlugin extends ThemePlugin {
    
      	public function init() {
      		$this->setParent('healthsciencesthemeplugin');
      	}
    
    
      	function getDisplayName() {
      		return __('plugins.themes.healthsciences-child.name');
      	}
    
    
      	function getDescription() {
      		return __('plugins.themes.healthsciences-child.description');
      	}
      }
    
      ?>
    
  • the content of index.php is:

    <?php
      require_once('healthSciencesChildThemePlugin.inc.php');
    
      return new healthSciencesChildThemePlugin();
    

    ?>

  • the content of version.xml is:

      <?xml version="1.0" encoding="UTF-8"?>
    
      <!DOCTYPE version SYSTEM "../../../lib/pkp/dtd/pluginVersion.dtd">
    
      <version>
    
      	<application>healthSciences-child</application>
      	
      	<type>plugins.themes</type>
    
      	<release>1.0.0.0</release>
    
      	<date>2019-03-27</date>
    
      	<lazy-load>0</lazy-load>
    
      	<class>healthSciencesChildThemePlugin</class>
      </version>

Why do you sometimes include a hyphen when the directory name doesn’t have one? healthSciences-child may be conflicting with healthSciencesChild.

1 Like

actually i dont know why…
the hifen is there because it is also at DefaultChildThemePlugin.inc.php
Anyway i tried without the hifens, but the result is almost the same.
The only change I can see is instead of “##plugins.themes.healthsciences-child.name##”, i now see “##plugins.themes.healthscienceschild.name##” at settings > website > plugins

OK, I was just thinking of things that might potentially cause a problem. If it’s not the naming conventions then let’s move along.

The name and description of the theme are set in the healthscienceschild/locale/[language_locale]/locale.xml file. What are the contents of that file?

1 Like

Ok! I forgot about the locale :stuck_out_tongue: that solved the way the theme and its description is displayed.
But this theme sitll isnt loaded by the themes dropdown box at settings > website > appearence.

Are there any php errors in the server error log for the site when you enable the plugin or open the appearance tab?

If you want I’d be happy to install your plugin on my development OJS installation and see if I can figure out what’s going on. Would you be able to upload your plug-in to github and post a link so that I could take a look at the whole thing?

Thank you so much for your help :slight_smile:
here ir is: https://github.com/CembraV/HealthSciencesChildTheme

1 Like

Excellent. I’ve gone ahead and made changes that – at least on my installation – allowed OJS to recognize, register and properly offer the child theme as an available theme on the appearances page. Let me know if it doesn’t work for you.

thank you again for your help, but it still doesnt work. It behaves exactly the same…

Did you change /healthSciences-child/healthSciencesChildThemePlugin.inc.php line 8 from what I had first mistakenly suggested…

$this->setParent('healthsciencesthemeplugin');

…to the correct parent identifier…

$this->setParent('healthSciences');

?

Make sure you refresh the Website Settings tab after you’ve enabled the theme plugin so that it shows up in the appearances dropdown menu section properly.

I’ve tried with all the changes you suggested and without any…
And allways refreshing… nothing seems to work…
I will upgrade to 3.1.2.0 to see if anything goes different…

I have now both versions (3.1.1.4 and 3.1.2.0)
My child theme doenst work on both, but i’ve tried Default Child Theme and it doenst work in either versions i have.
So, this is definitely a problem with my instalations and not with the theme…

Hi @cembra,

Should be renamed to your theme’s directory name:

<application>healthSciences-child</application>

Main theme PHP class should contain init() method like @horne.b has mentioned. Both themes should be activated, the parent and a child.

Anything else looks normal.

I’ve done it and it still doesn’t work.
Anyway, as said before the Default Child Theme doesnt work either, so this is a problem with my ojs installation, but i’ve got no clue on troubleshoting this…

Hi @cembra,

I’m sorry, for the version.xml:

<application>healthSciencesChild</application>

So this line should correspond to the directory name. Does the child theme work in this case?

This should be the same and for child theme example: defaultChild/version.xml at master · NateWr/defaultChild · GitHub
It should match the theme’s folder name

Yes @Vitaliy, i’ve done that change and it still doesnt work.
The problem is with my ojs installation as Nate’s Defaukt Child theme doesn’t work either…

I’ve made a pull request.