Modify a theme to insert custom widgets?

Question

I am quite new to WordPress and theming but have been a server admin have some experience programming.

I downloaded a theme I wish to customize, I would like to place a HTML widget on the frontpage so I can easily plug HTML in via the way widgets traditionally do.

My first idea was to simply hook into a certain area with JavaScript and insert my additions but this doesn't seem to be ideal if I want to learn the WordPress ecosystem.

With a theme, what is the best way to simply add a HTML widget (that I can edit in the dashboard somewhere) to the front page of my custom theme. The WordPress way that is, I believe there are several 'hack-y' ways to do this but don't seem like a logical long term solution.

Many thanks, can provide more details if needed of the theme etc.

Also for modifying existing theme CSS/JS is the best way to install a per-page script + style plugin and add/modify from there or is there a more traditional WordPress way.

Answer 1

As asked the question is quite broad, so I'll provide a broad answer.

Unless the original theme provides its own hooks (which isn't out of the question, and in which case you would need to consult its docs) the best way to do this would be to create a Child Theme, copy the relevant template to the child theme, and make the modifications there.

In terms of how to make an editable HTML widget in that template there are several options:

• Register a widget area using register_sidebar() in functions.php and output it in the template with dynamic_sidebar(). Then you can add the HTML with a Custom HTML widget.
• Use the Customize API to add a field to the Customiser for the HTML to go in and output it in the template with get_theme_mod().
• Add a custom field for the HTML and output it in the template with get_post_meta().

Ultimately though the exact approach comes down pretty much entirely on how the original theme was constructed. Some themes don't work very well with child themes so you might run into issues trying to make changes that way, and other themes might offer their own hooks or APIs for making changes like this. It's impossible to say without seeing its code. I would suggest contacting the developer of the original theme as a first step.