Add js,css and html from codepen or other sites

Activello
1

I was testing some features and found a nice code from codepen (http://codepen.io/wedranb/pen/aNwLog)
I really liked it and tried to add to a page, so i tried using the JS & JS Toolbox to insert it to a custom page, but nothing appears http://www.revistaema.com.br/teste/

Then i tried to add some code to function.php and still didn’t work:

add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
function addcssAndScripts()
{
    if ( is_page('163') )
    {
        wp_enqueue_script( '/css/egg.js' );
        wp_enqueue_style( '/css/egg.css' );
    }
}

Does someone have any idea on how can i get this on the page

If it works i can even add some CSS shapes, like this: http://codepen.io/una/pen/vOQrew

2

ps.: I added the compiled CSS from codepen, not the SCSS

3

Hi @revistaema,

I hope you are well today and thank you for your question.

To achieve this you have to create child theme of Activello theme then you have to develop custom page template in it as described on this page https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use in that page template file add HTML code from http://codepen.io/wedranb/pen/aNwLog

Add js and CSS code in the child theme files egg.js egg.css respectively then load that files in the site by developing custom code as described on the below page.

Best Regards,
Movin

4

Thank you
I wasn’t loading the js that appears on the configuration of codepen
However i need the Draw SVG Plugin, but it is a paid plugin =P

Do you know some similar library with same or similar syntax?

5

I don’t find similar library with same or similar syntax but couldn’t you achieve it as i have described in my above previous reply?

6

i could
But the code was using a paid library to draw svg
So it only works on codepen, if i put it on my site, it shows only ads of the draw svg plugin
Tried to use other libraries, but they are not the same syntax
So or i recode or just put aside =[

Thanks for the help =]

7

You are most welcome here :slight_smile: