Add both PHP, HTML and JS at the same time

How To
1

Hello Community

Really excited to be here.
I have searched in the forum for this, but i didn’t find a 100% answer.

I am trying to use the code element to put in both PHP, CSS and javascript all at the same time — like in Oxygen you have 3 different tabs for that. And i can’t seem to get the javascript part to execute.
Whereas i make a ‘code element’ and put in the PHP code and under the CSS tab for that code element i put in the CSS, i am not sure what to do with the script.

Here is what i have tried:

  • Put the code in same field as the PHP with a script tag around it.
  • Looked for that ‘specific page’ option in the Global settings as described in the Academy, but it seems like it has been removed??!!?
  • Made a seperat code element and put in the Javascript element here.

It just looks like my page is not ‘catching’ the javascript.

I tested the same setup in Oxygen with the 3 tabs and it worked like a charm. But as i can foresee i am going to need this a lot — and i would really like to get deeper into Bricks — it could be nice to figure this out.

Anyone had luck with putting in all 3 elements and get it to work?

2

Hi @Brokop , welcome to the forum!
You can put all of your custom code into the code elements “content” field like:

<style>
  h1.my-heading {
    color: crimson;
  }
</style>

<h1 class='my-heading'>Just some custom HTML</h1>

<script>
  console.log("test");
</script>

<?php
  echo "Hello world";
?>

Alternatively you can put custom css and custom js into the custom code section of the page settings. Click on the little gear icon in the upper left of the builder » Page Settings » Custom Code, where you will find a custom css input and three js inputs (header, body, footer).

Also, you can place custom css related to a specific element directly into it’s custom css field which is under element » style » custom css.

Relating to your js problem: Maybe the code block is in the wrong order?

Best Regards,
timmse

1 Like
3

Thank you for a swift response. I will give it a try :slight_smile:

1 Like
4

Works flawesly! :slight_smile:

@timmse but as I see, I cannot execute ACF code, ex. “get_field(‘field’)”
It’s not available yet, right? :slight_smile:

5

Sure,

just put them inside php tags and you can use them as well :slight_smile:

The example above only shows that you can put almost everything into one single code element.

1 Like
6

@timmse my mistake! 1st there’s sometimes a delay in refreshing code component
and 2nd I forgot I was trying to show ACF field which is contained as ‘option’
so I had to use the 2nd parameters ‘option’, so now this →
<?php the_field( 'field_name', 'option' ); ?>
works :slight_smile:
thanks !

It’ll be just nice to have an option to resize the text-area of the code component :slight_smile:

7

Nice, you´re welcome.

Get sure to hit the little “run code” icon in the upper right of the code element after changing something. That “refreshes”, so there shouldn´t be a delay anymore.

You can change the width of the sidebar, just move your cursor over the edge of the sidebar to make it bigger. But be careful, we have a little bug when changing the width of the sidebar: the cursor position gets messy from time to time.

1 Like