Sometime we need to add meta, CSS style sheets and custom code. Astra provide different method for adding custom code in page (head, footer).
Custom Layouts
Astra Pro provide custom layouts for customize you website. You can customize:
- header
- footer
- 404 page
- Hooks
- Inside Page/Post content
You can check Custom Layouts Overview – Astra Pro website, they provided a guide video.
Add custom code via theme editing
To adding custom code via function.php ( Dashboard > Appearance > Theme Editor > function.php), you need to check which location/hook you are dealing with. You can check Astra Theme Visual Hooks. For non-astra user, normally you can use:
- wp_head
- wp_footer
- wp_meta
you can check WP action hooks and filters for more, the hooks usually prefix with “wp_”.
/**
* Custom hook
* Guide
* https://wpastra.com/docs/using-hooks/
* https://developers.wpastra.com/theme-visual-hooks/
* https://adambrown.info/p/wp_hooks/hook/actions
*/
/**
* e.g. Add code in <head>
*
function custom_head() {
// Your PHP goes here
?>
<!-- Your HTML goes here -->
<?php
// Your PHP goes here
}
add_action ('wp_head','custom_head');
*/
First, you need to create a function with custom name for each location, the above example is “custom_head”.
For PHP code, you can simply paste within the bucket (before “?>” or after “<?php”).
For HTML code, you need to add “?>” as prefix and “<?php” as postfix. without the prefix and postfix, the HTML will treat as PHP code instead of HTML code.
After the function is created, you need to use “add_action ()” to add your custom code in to the target location. In this example, “wp_head”.
Remember to check if the code is worked, syntax error may not be detected.