0

I am new to wordpress development and I've read the documentation on how to do what I want to do but I can't find any decent answers.

I want to make a plugin that can show a popup window when someone goes to a certain page. the info in the popup will be customizable based on what the admin wants to show but I cannot figure out how to add css and js to the page the visitor is currently on. Basically injecting html and css into the body. I'm a junior developer and I've never worked with php or wordpress before (until a week ago when my boss asked me to make this wordpress plugin) but I know JS quite well.

any help or pointing in the right direction would be appreciated.

Improve this question

2 Answers 2

Reset to default
0

I found a small solution BUT its not the best instead of what you ask!

You can create an custom page template in your theme or child theme https://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/#manual

And paste the code:

https://www.w3schools.com/howto/howto_js_alert.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
</style>
</head>
<body>

<h2>Alert Messages</h2>

<p>Click on the "x" symbol to close the alert message.</p>
<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

</body>
</html>
Improve this answer
0

I guess it doesn't matter where on the page the pop-up HTML goes?

  • You can hook the wp_footer action, which is normally called at the bottom of the page just before the </body> close tag. That's probably the right place to write your pop-up's div etc.
  • You can add extra CSS and JavaScript to the page using wp_enqueue_style and wp_enqueue_script, which you should call inside a wp_enqueue_scripts hook. (The JavaScript here is typically written from a wp_footer handler though, so you could equally just write the script tag when you write your pop-up HTML. But I'd use wp_enqueue_script anyway.)
Improve this answer
1
  • thanks I'll definitely try this.
    – DanielTheCoder
    Jul 7, 2021 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.