Newsletters: Using a child theme folder

Using a child theme folder in the WordPress Newsletter plugin.

By default, the Newsletter plugin includes a default theme folder at wp-content/plugins/wp-mailinglist/views/default/ which contains all the template files (PHP), styles (CSS), JavaScript (JS), etc. for the front-end that your users/subscribers see on the site.

You may want to change some of the template files, the styling, switch out images or even change JavaScript which can be done in that folder but the main problem is that these custom changes will be overwritten when you upgrade/update the Newsletter plugin. So we built a child theme folder system so that you can host your changes outside of the actual plugin folder.

To create and use a child theme folder is quick and easy for anyone. Let’s use an example as reference so that you can follow the instructions below. In this example, we want to make CSS changes to the wp-content/plugins/wp-mailinglist/views/default/css/style.css file and we also want to change some HTML in the subscribe widget which is wp-content/plugins/wp-mailinglist/views/default/widget.php

1. Create your child theme folder

Your child theme folder is named newsletters and it will be created inside the folder of your WordPress theme. So for example, the folder name of your WordPress theme is twentyfourteen. Then you’ll go to wp-content/themes/twentyfourteen/ folder in your WordPress installation and create a newsletters folder in there so that you now have wp-content/themes/twentyfourteen/newsletters/ directory.

If you are using a WordPress child theme, it works the same way. For example your WordPress child theme’s folder name is twentyfourteen-child, you’ll go and create wp-content/themes/twentyfourteen-child/newsletters/ directory.

2. Copy files over to the child theme folder

In this example, we want to make modifications to two files in the Newsletter plugin‘s default theme. The two files are wp-content/plugins/wp-mailinglist/views/default/css/style.css and wp-content/plugins/wp-mailinglist/views/default/widget.php

(Note that for display purposes, not all files are showed in the screenshot above. The plugin has many other files in the wp-mailinglist folder, we are just showing the two files for the example)

Go into FTP and copy the two files files from the above mentioned two locations to wp-content/themes/twentyfourteen/newsletters/. Only copy over the files that you want to modify, not everything inside the Newsletter plugin’s wp-content/plugins/wp-mailinglist/views/default/ folder. So in this example you’ll only copy two files over. Also, keep the same structure inside the child theme folder as it is inside the default theme folder.

You’ll now end up with wp-content/themes/twentyfourteen/newsletters/css/style.css and the other one wp-content/themes/twentyfourteen/newsletters/widget.php

3. Modify the child theme folder files

You can now go and make changes to the two files you copied over and you’ll see that these files are served by the plugin and that the changes will take effect on the site.