[Support request] Adding Custom CSS and PHP Codes Using “Elements” Feature

[Usman]

Hey there,

I have built some custom solutions for a site including the signup form, and other UI changes. For this, I wrote several pieces of custom CSS and PHP.

To better organize them, I am using two plugins. For PHP, the code Snippet, and for CSS, the Custom Codes. Both are running under a free license.

This fulfills the need but, I want to get rid of plugins. I am already using the Appearance > Elements > Hook option to add any custom code like the header verification codes, or the custom schema codes.

So, is there any way by using that I can add these custom CSS and PHP codes using the same feature so that I can get over these two plugins?

If GP doesn’t support this feature yet, it would be great to consider it. (Humble Suggestion :))

Thanks.

[David]

Hi there,

the ideal solution to remove the plugins is to install a child theme and use its styles.css and functions.php

You can use a GP Hook Element for some stuff:

1. CSS can be added to the wp_head hook. Wrap your CSS in <style>your css</style> tags.

2. PHP can be executed in a hook, however it should only be used where it is applicable and safe to do so. Elements are for hooking in content to a front end template, and a lot of code snippets need to be executed before WP loads a template. Therefore you should not use them for:

1. registering functions that are called outside of that hook.
2. making Hook callbacks eg. add_filter or add_action

[Usman]

Thank you @David for the suggestions.

The CSS is working fine as you mentioned. But, when I try to add PHP `function add_copyright_text() {
if (is_single()) { ?>

<script type=’text/javascript’>
function addLink() {
if (
window.getSelection().containsNode(
document.getElementsByClassName(‘entry-content’)[0], true)) {
var body_element = document.getElementsByTagName(‘body’)[0];
var selection;
selection = window.getSelection();
var oldselection = selection
   var pagelink = “<br /><br /> Read More: <?php ?> <a href='”+document.location.href+”‘>”+document.location.href+”</a><br>© RelationCounseling.Org”; //Change this if you like
var copy_text = selection + pagelink;
var new_div = document.createElement(‘div’);
new_div.style.left=’-99999px’;
new_div.style.position=’absolute’;

body_element.appendChild(new_div );
new_div.innerHTML = copy_text ;
selection.selectAllChildren(new_div );
window.setTimeout(function() {
body_element.removeChild(new_div );
},0);
}
}

document.oncopy = addLink;
</script>

<?php
}
}

add_action( ‘wp_head’, ‘add_copyright_text’);`

In the Hook wp_head it breaks the site. And site shows the critical error.

[David]

Yep, thats an example of:

2. making Hook callbacks eg. add_filter or add_action

So thats not something you would do.

In that case simply add the <script> to the hook text area.
In the hook element set the hook to wp_head
Set the Display Rules to Post > All Post.

[Usman]

I believe I am doing the same!

Screenshot: https://drive.google.com/file/d/1aIoEB-sIoiCW6xCDGBuN4zoDkalJkY-K/view?usp=sharing

[Ying]

The element’s content field is for HTML, so make sure you add <?php prior to your PHP code, and ?> in the end of it as well.

[Author]

Posts