How to create a "plugin" or "block" that can manipulate Wordpress DOM in frontend?

admin管理员组

文章数量:1122846

I tried to understand the wordpress plugin dev ecosystem. It is somehow not clear what the right way is for a plugin that displays some HTML/CSS in the frontend of a wordpress/woocommerce page, that also includes javascript to manipulate the DOM or make API calls to woocommerse API?

Do I have to create a normal plugin or is it called blocks now? Is there a simple walkthrough/tutorial for such a plugin?

I tried to understand the wordpress plugin dev ecosystem. It is somehow not clear what the right way is for a plugin that displays some HTML/CSS in the frontend of a wordpress/woocommerce page, that also includes javascript to manipulate the DOM or make API calls to woocommerse API?

Do I have to create a normal plugin or is it called blocks now? Is there a simple walkthrough/tutorial for such a plugin?

• plugins
• plugin-development
• woocommerce-offtopic

Share Improve this question asked Oct 18, 2022 at 20:35 user3037960user3037960 11133 bronze badges 5

• 1 "Blocks" are used in the new(ish) backend editor. If you want to add a type of content to the editing screen, you might need to write a block plugin. If you need to add HTML/CSS/JS to the frontend, you'd still be writing a (non-block) plugin. – Pat J Commented Oct 18, 2022 at 21:09
• So what is it called? Because when I try to follow any resources, the Plugins are always for the Admin pages - but I want actually have something like a widget, that shows up in the frontend.. just a <h1>hi</h1><script>alert('hi');</script> would be enough. – user3037960 Commented Oct 18, 2022 at 22:48
• 1 If you're writing a custom plugin, you can call it anything you want. WPBeginner guide | WordPress Plugin Basics (or, if you prefer, you can hire someone to write it for you) – Pat J Commented Oct 19, 2022 at 3:13
• 2 As written, your question is extremely broad. Without more specifics it's not possible to provide a solid recommendation. I would advise finding something in WordPress or WooCommerce core that works similarly to what you want to do and use that as a starting point. Whether that's going to involve blocks is hard to say. You mention wanting to add some HTML to a WooCommerce page. Does that mean it should be added automatically to a particular page? Or will the user choose where to place it? Should the user be able to edit the contents? What exactly does the associated script do? – Jacob Peattie Commented Oct 19, 2022 at 8:06
• I really don't understand how the question is broad. A "plugin" that shows a html button in the header of the website in the frontend (not admin pages). That is all what it should do, no functionality – user3037960 Commented Oct 19, 2022 at 8:51

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I think I might understand your question. If you want to manipulate WooCommerce 'pages' (they're really posts) you need to look into the WooCommerce add_action and add_filter hooks that are exposed to you from WooCommerce or your theme. If you want to display HTML with some functionality like making API calls to third party software you can write a custom theme template in a child theme. If you want to make some bit of code very reusable to other users like writers or another admin I would look into shortcode development in wordpress. Hopefully this answers your question.

本文标签： How to create a quotpluginquot or quotblockquot that can manipulate Wordpress DOM in frontend