{"id":602,"date":"2017-08-26T13:45:59","date_gmt":"2017-08-26T12:45:59","guid":{"rendered":"http:\/\/chewett.co.uk\/blog\/?p=602"},"modified":"2018-08-14T22:50:51","modified_gmt":"2018-08-14T21:50:51","slug":"modifying-wordpress-theme-child-theme","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/602\/modifying-wordpress-theme-child-theme\/","title":{"rendered":"Modifying a WordPress theme with a child theme"},"content":{"rendered":"

The recommended way to modify a WordPress theme is to use a child theme. This allows redefining all features of the parent theme without manually changing the theme. This post describes why you might want to do this and how to do it.<\/p>\n

<\/p>\n

Why would I want a child theme<\/h2>\n

One of the primary benefits of creating a child theme is so that you can modify a theme in a way that the default theme options don’t provide. Many themes by default only allow a small number of configuration options which can limit what you can change.<\/p>\n

By creating a child theme you are able to change any part of the original theme by overriding the styling and features. This would be possible if you customized the main theme however that would mean you wouldn’t get theme updates. By using a child theme the parent theme is easily updatable as updates won’t interfere with the child theme.<\/p>\n

Please note this post doesn’t discuss the potential legality of whether you are allowed to modify a theme. Please check the licence\u00a0of your distributed theme before doing this. Many themes will let you use child themes to modify your theme but you should check.<\/p>\n

How to create a child theme<\/h2>\n

The first step in creating a child theme is creating the folder to store the theme. You will want to create this in your theme folder located in wordpress_root_directory\/wp-content\/themes\/<\/code>.<\/p>\n

Here it is recommended you create a folder named the same as your theme with the suffix -child<\/code>.\u00a0This means if your theme was called super-cool-blue-theme<\/code> you will want to name it super-cool-blue-theme-child<\/code>.<\/p>\n

Once this has been done you need to create a file in this directory called style.css<\/code>.\u00a0This file holds the primary information about your new child theme. An example style.css<\/code> is reproduced below.<\/p>\n

\/*\r\nTheme Name: Super Cool Blue Theme child\r\nTheme URI:\r\nAuthor: Chewett\r\nAuthor URI: https:\/\/chewett.co.uk\r\nTemplate: super-cool-blue-theme\r\nDescription: changes to the super cool blue theme\r\nVersion: 1.0.0\r\nLicense: Some licence\r\nLicense URI: Some URL\r\n*\/<\/pre>\n
The only important thing to change from the above is the Template<\/code>\u00a0field. This must be set to the name of your parent theme. In our case I have set it to super-cool-blue-theme<\/code> as this is the name of the parent theme I have made up.<\/p>\n
The other elements are used by WordPress to hold the details of what the theme is. If you are only making the modifications for yourself the contents are not massively important.<\/p>\n
The final step for a basic child template is adding a file called functions.php<\/code>.\u00a0The recommended example from <\/a>WordPress\u00a0from states the content should be:<\/p>\n
&lt;?php\r\nfunction my_theme_enqueue_styles() {\r\n  $parent_style = 'super-cool-blue-theme-style';\r\n\r\n  wp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\r\n  wp_enqueue_style( 'child-style',\r\n    get_stylesheet_directory_uri() . '\/style.css',\r\n    array( $parent_style ),\r\n    wp_get_theme()-&gt;get('Version')\r\n  );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\r\n?&gt;<\/pre>\n
The main thing to change in this script is the variable $parent_style<\/code> which needs to be set to the name of your parent theme plus the text -style<\/code>\u00a0at the end.<\/p>\n
Once these two files are in place you should be able to select your child theme in WordPress. At this point, the child theme should exactly mimic the parent theme.<\/p>\n
Making simple overrides<\/h2>\n
There are a couple ways to make simple overrides to the WordPress theme. The first is to add your own CSS styling to the style.css<\/code>\u00a0file. Any CSS you place here will be loaded and will override CSS in the parent theme. This can let you modify the CSS that the parent theme uses to customize your theme.<\/p>\n
The other way to change the theme is to modify the functions.php<\/code> file. This file is loaded before the parent theme so you can define override functions. Some themes are “pluggable” which means that before defining any of the functions they use, they check if they are defined as shown below:<\/p>\n
if ( ! function_exists( 'theme_special_nav' ) ) {\r\n  function theme_special_nav() {\r\n  \/\/ Do something.\r\n  }\r\n}<\/pre>\n
By doing this any child theme can define this function and the parent theme will use the child themes function. If your theme supports this you can use this behaviour to define your own custom functions for some of their scripts.<\/p>\n
If your theme doesn’t support this, or you want to add complementary behaviour to the theme you can define a function to run before or after the parent\u00a0themes.<\/p>\n
function fixImageSize() {\r\n\u00a0 add_image_size( 'custom-override', 200, 200, true )\r\n}\r\n\r\nadd_action( 'after_setup_theme', 'fixImageSize', 15);<\/pre>\n
The function add_action<\/code>\u00a0allows you to specify a function to run when and what priority. By default, actions are added at level 10 and therefore by defining the above function at level 15 it will run after anything defined in the parent theme at level 10. This allows me to run my custom setup function once all the defaults have been set by the parent theme.<\/p>\n
By using these two methods you are able to override any part of a wordpress theme while keeping the major parts of the parent theme.<\/p>\n
For full information I recommend reading the wordpress codex on child themes<\/a>.<\/p>\n
<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"
The recommended way to modify a WordPress theme is to use a child theme. This allows redefining all features of the parent theme without manually changing the theme. This post describes why you might want to do this and how to do it.<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5],"tags":[28,157],"class_list":["post-602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informational","tag-wordpress","tag-wordpress-child-theme"],"wppr_data":{"cwp_meta_box_check":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/08\/wordpress_child_themes.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-9I","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2568,"url":"https:\/\/chewett.co.uk\/blog\/2568\/fixing-wordpress-image-thumbnails-not-being-the-right-size-for-your-theme\/","url_meta":{"origin":602,"position":0},"title":"Fixing WordPress Image Thumbnails not being the right size for your Theme","author":"Chewett","date":"August 15, 2020","format":false,"excerpt":"This post talks about how you can fix Wordpress Image thumbnails not being the right size for your theme. Why this issue occurs Whenever you upload an post image the thumbnail is created on upload. This means that the image thumbnail does not need to be created on the fly.\u2026","rel":"","context":"In "Fixes"","block_context":{"text":"Fixes","link":"https:\/\/chewett.co.uk\/blog\/category\/fixes\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/08\/fixing_thumbnails_wordpress_icon.jpg?fit=1200%2C628&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/08\/fixing_thumbnails_wordpress_icon.jpg?fit=1200%2C628&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/08\/fixing_thumbnails_wordpress_icon.jpg?fit=1200%2C628&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/08\/fixing_thumbnails_wordpress_icon.jpg?fit=1200%2C628&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/08\/fixing_thumbnails_wordpress_icon.jpg?fit=1200%2C628&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1872,"url":"https:\/\/chewett.co.uk\/blog\/1872\/raspberry-pi-cluster-node-09-multi-slave-master\/","url_meta":{"origin":602,"position":1},"title":"Raspberry Pi Cluster Node \u2013 09 Multi Slave Master","author":"Chewett","date":"January 2, 2019","format":false,"excerpt":"This post builds on\u00a0my previous posts in the Raspberry Pi Cluster series\u00a0by changing the master so that it accepts multiple slaves connecting to it. Creating a thread to handle each client Typically to handle multiple operations occurring at once in a program, you will use additional threads or processes. These\u2026","rel":"","context":"In "Raspberry Pi Cluster"","block_context":{"text":"Raspberry Pi Cluster","link":"https:\/\/chewett.co.uk\/blog\/category\/raspberry-pi-cluster\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/12\/rpi_cluster_09_multi_slave_master.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/12\/rpi_cluster_09_multi_slave_master.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/12\/rpi_cluster_09_multi_slave_master.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/12\/rpi_cluster_09_multi_slave_master.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":741,"url":"https:\/\/chewett.co.uk\/blog\/741\/raspberry-pi-cluster-node-01-logging-liveness\/","url_meta":{"origin":602,"position":2},"title":"Raspberry Pi Cluster Node – 01 Logging Liveness","author":"Chewett","date":"November 1, 2017","format":false,"excerpt":"This post describes how to make a simple python script that logs the node is alive every 10 seconds. Why we are going to log each node is alive As discussed in the previous post on Distributed Computing on the Raspberry Pi Cluster there will be many slaves and a\u2026","rel":"","context":"In "Raspberry Pi Cluster"","block_context":{"text":"Raspberry Pi Cluster","link":"https:\/\/chewett.co.uk\/blog\/category\/raspberry-pi-cluster\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/10\/rpi_cluster_01_logging_liveness.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/10\/rpi_cluster_01_logging_liveness.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/10\/rpi_cluster_01_logging_liveness.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/10\/rpi_cluster_01_logging_liveness.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2486,"url":"https:\/\/chewett.co.uk\/blog\/2486\/fixing-fork-failed-resource-temporarily-unavailable-on-linux\/","url_meta":{"origin":602,"position":3},"title":"Fixing “fork failed: Resource temporarily unavailable” on Linux","author":"Chewett","date":"June 20, 2020","format":false,"excerpt":"This blog post talks about how you can fix the error \"fork failed: Resource temporarily unavailable\" on Linux. What this message means This message typically means that the operating system has limited your ability to \"fork\". This typically will stop you creating new threads or processes on Linux. This issue\u2026","rel":"","context":"In "Informational"","block_context":{"text":"Informational","link":"https:\/\/chewett.co.uk\/blog\/category\/informational\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/06\/fixing_ulimit_posticon.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/06\/fixing_ulimit_posticon.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/06\/fixing_ulimit_posticon.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/06\/fixing_ulimit_posticon.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1226,"url":"https:\/\/chewett.co.uk\/blog\/1226\/changing-boot-order-with-grub-on-fedora\/","url_meta":{"origin":602,"position":4},"title":"Changing boot order with GRUB on Fedora","author":"Chewett","date":"June 6, 2018","format":false,"excerpt":"In this post I talk about how you can change the default selected OS and reorder the boot list in GRUB for Fedora. The Default GRUB ordering By default when the GRUB bootloader is installed it will search for all installed operating systems. Their default ordering is based on the\u2026","rel":"","context":"In "Fixes"","block_context":{"text":"Fixes","link":"https:\/\/chewett.co.uk\/blog\/category\/fixes\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/altering_boot_order_grub_fedora.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/altering_boot_order_grub_fedora.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/altering_boot_order_grub_fedora.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/altering_boot_order_grub_fedora.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2090,"url":"https:\/\/chewett.co.uk\/blog\/2090\/raspberry-pi-cluster-node-13-abstracting-slave-code\/","url_meta":{"origin":602,"position":5},"title":"Raspberry Pi Cluster Node \u2013 13 Abstracting Slave Code","author":"Chewett","date":"March 23, 2019","format":false,"excerpt":"This post builds on my previous posts in the Raspberry Pi Cluster series by abstracting the slave code so it is ready for more complex slaves. Why I am abstracting the Slave code As the system becomes more complex there will be a number of slaves performing different tasks. Currently\u2026","rel":"","context":"In "Raspberry Pi Cluster"","block_context":{"text":"Raspberry Pi Cluster","link":"https:\/\/chewett.co.uk\/blog\/category\/raspberry-pi-cluster\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/rpi_cluster_13_abstracting_slave_code.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/rpi_cluster_13_abstracting_slave_code.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/rpi_cluster_13_abstracting_slave_code.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/rpi_cluster_13_abstracting_slave_code.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":8,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/602\/revisions"}],"predecessor-version":[{"id":1456,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/602\/revisions\/1456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}