how to change style of main page style with plugin? - wordpress

Question

I am creating a plugin for my theme to customize it, But when I use PHP and I edit the style of main page when using post request, and I don't believe WP AJAX system is a way way to edit style of main page with hooks?
And can I create short codes in my theme, or can I only create it in plugin???

Answer 1

In the case of Wordpress, which is a CMS for web projects, styling is mainly done via writing CSS code and rendering that in the web-browser.
How to apply a styling
Inline
You can do inline styling (unadvisable), example:
<input type="text" value="something" style="color: red;">
The reason this is generally not a desirable practice is that you would always have to add the styling to each element you want to apply it at. This is a problem, because if you have a consistent styling, applied at liked 10 000 elements and then you intend to change it, you will have to apply it at every 10 000 instances of its inline definition.
You may still use inline styling at some point, but you should avoid doing so unless you are absolutely sure that it's adequate for the given problem you solve.
Style tags
You can also add a style tag to your page, which is better than inline styling in general, but it's more difficult to reuse it than a css file. Example:
<style type="text/css">
input.red {color: red;}
</style>
<input type="text" value="something" class="red">
css files
You could create a file like style.css, move your styling from style tags there and create a link tag, as
<link rel="stylesheet" href="styles/style.css">
Note that the code above assumes that there is a styles folder where you store your css files and that your style.css is inside that folder. This is a generally accepted practice about styling, which is a very popular approach.
There are some technologies violating this separation of CSS from structure, like ReactJS, which has a different approach for this stuff, but, if you do not use those SPA approaches (and at least while you learn Javascript and CSS it is a good idea to avoid them), then this is an advisable practice.
The approach
In all cases I will assume that you have a CSS file that you want to append to your head tag at styles/style.css. If you have some differences in your dev environment, then you of course will need to rely on what your environment is like.
Modifying a theme
You can modify your theme whenever you want to do so, it's available on source-code level. However, if it's a theme that is not customly made by you and you intend to use its new versions in the future, then it's advisable to avoid changing the source-code of your theme.
However, at the point when the HTML is generated and particularly the head tag, you can add the link tag as described earlier. As a matter of fact you can add it inside the body tag as well.
Modifying the plugin
If you use a plugin and some HTML is generated there that is applied to the page, you can easily add your link tag to that as well. However, if you are doing some AJAX requests and you determine whether you need the styling at that level, then you will need your Javascript to add a link tag to the head, example:
function addLink(path) {
document.querySelector('head').innerHTML += `<link rel="stylesheet" href="${path}">`;
}
However, this is to be avoided if you know in advance that your file will always be needed. If you want to dynamically change the styling by adding some stuff to it, then you can call the function above, passing the desired path.