In drupal 9. How can I add custom html between <head></head> Doing a hook or something rather than install a module - drupal

I am trying to add custom html between <head></head> Doing a hook or something rather than install a module.
But i cant figure how to doit.
I am using bartik and i make this function
function bartik_add_text_to_header(&$vars, $hook) {//}
but i cant figure how or which function to used.
I try with
drupal_set_html_head('style type="text/css">#import url(' . $GLOBALS[base_url] . '/modules/codefilter/codefilter.css);</style>');
But the drupal_set_html_head looks that is not existing in drupal 8 or 9

You should be using a custom theme with bartik as it's base theme rather than the bartik theme itself.
Just make the minimum file for a theme and set the bartik theme as it's base theme.
You can put whatever you want in the head section by overriding the template file that is currently being used to output that part of the html. For Bartik it is a file named html.html.twig in the core/themes/bartik/templates/classy/layout folder.
You would make a copy this file and put it into your custom themes templates folder so your file is used instead of the original.
To easily find what file is currently being used, you can enable twig debugging so comments are output in your html that show exactly what template files are being used.
Having said all that, and seeing as you are only looking to add css, you probably want to check out this page on Adding stylesheets (CSS) and JavaScript (JS) to a Drupal theme which will show you the different options you have to add js and css.
If you are just after a quick answer.... the function you want may be:
function fluffiness_preprocess_page(&$variables) {
$variables['#attached']['library'][] = 'fluffiness/global-styling';
}

Related

Drupal basic page doesn’t seem to use page.tpl.php

Title says it really. Basic pages created in Drupal don’t seem to use the page.tpl.php file as a template.
If I edit the html.tpl.php file, those changes apply to every page, and it causes errors when I load a basic page.
I have also tried to copy the page.tpl.php file and name it page—basic-page.tpl.php to no avail.
Any idea what’s going on?
Also, how do I go about changing the page_top variable to include more content?
Lastly, the default page.tpl.php file has $page variables and things like $page_top and the like.
How would I call the title from the page only and the body text of a page only?
I’m using Drupal 7 and a custom sub theme.
The aforementioned files are in the template folder of the theme and I did clear caches when I added them.
Add $conf['theme_debug'] = TRUE; in settings.php and clear cache, reload page and check view source.
It will display the template file suggestions.
page.tpl.php file common for all pages. Just print anything to the tpl and run any node of basic page as well as other content type page and check if its working or not. If page.tpl.php not working for basic page only, then check your template.php file.
For print a page title just need to use following code:
<?php print $title; ?>
For print body text you need to use following:
<?php print render($page['content']); ?>
This may depend on the theme you are using. But I guess you are actually meaning page--page.tpl.php (double dashes). Which will be taken into account after you added the following snippet to your theme's template.php. Replace MYTHEME with your theme's machine name.
function MYTHEME_preprocess_page(&$variables) {
if (isset($variables['node']->type)) {
// If the content type's machine name is "my_machine_name" the file
// name will be "page--my-machine-name.tpl.php".
$variables['theme_hook_suggestions'][] = 'page__' . $variables['node']->type; // (double underscores)
}
}
See Template (theme hook) suggestions, where I also got above snippet from.
active theme debug for inspecting the template source and you get a different suggestions to user it (just avoid using node/nid).
commend drush to enable theme debug drush vset theme_debug 1

Add comments to wordpress inspect element page

As the title says, I want to add some sort of signature with comments on my wordpress index file, thing is - there are 30 different index files and none of them seems to work
If I understand correctly, it'll just be a case of adding some HTML comments (not PHP comments as they won't show in the source code) in your theme files. Bear in mind that editing a theme won't work if someone else made it and releases updates to it as it'll overwrite your changes if you update it.
The best place to add in the comments is to either open the header.php file and place your HTML comments after the opening <body> tag. If your theme doesn't include a header file, you could always add your comments to the top of your themes index.php file instead.
Your theme should be located within /wp-content/themes/YOUR-THEME/.
Alternatively, you could also place HTML comments between the <head> tags of your theme so they show up a bit higher in the source code. To do this, it's probably best to use an action hook instead. Place this in your themes functions.php file:
add_action( 'wp_head', 'add_signature_to_theme', 1, 0 );
function add_signature_to_theme() {
?><!-- Welcome to my website. --><?php
}
The wp_head action hook documentation is useful to have as reference as well if you'd like a bit more information on what it is and what it does.

Load custom css after plugin css in wordpress

I'm trying add CSS to testimonial slider (3rd Party plugin) on my wordpress theme. But my custom CSS file loads before the plugin CSS file.
Is there a way I can make the my custom CSS load after the plugin CSS?
I don't want to make any changes to the Plugin code.
Edit:
I noticed that the plugin is using "wp_print_styles" to load it's css file.
You'll need to update your plugin code to do this the "proper way" I believe.
Since you need it to load last I would take the common path of utilizing the wp_enqueue_scripts hook/function to set a low priority for it being processed. This way you can guarantee that the HTML remains valid and that you are loading your styles and scripts after all the default ones within WordPress plugin's code:
function my_plugin_unique_style() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-my-plugin-style', $base.'/styles.css' );
}
add_action('wp_enqueue_scripts', 'my_plugin_unique_style', 11 );
Of course you will have to modify this to use your plugin's css file name but this is the basic way to do this and have valid markup. It's worth mentioning that if this still loads before another CSS file in the HEAD of the page you should bump up the number from 11 to some other higher number.
You can read more about wp_enqueue_scritps here.

Wordpress - where should I place editable CSS

Where do I place things like header's image, background color, background image...? Should I simply add them to html code? Or add pieces of the CSS to functions.php?
Also, when I add some code to head section from functions.php - will this be loaded automatically, or should I add something more to the head section myself?
you can change style.css for any css change
and header.php for header section,footer.php for footer section
for home content index.php file
you can call function from function.php file in to these files
If the theme you are using already has the HTML, then just modify the style.css. If the theme doesn't support the image placements that you want, you can either try to modify the HTML files yourself, or ask the theme creator to add it for you. If you modify this yourself, you'll have to remember that future updates to the theme may overwrite your changes.
If you are creating your own theme and don't care about flexibility, then add a spot in the HTML using your tags.

How do I use new add_editor_style() function in wordPress?

I found this article:
http://www.deluxeblogtips.com/2010/05/editor-style-wordpress-30.html
I created a child theme using the Twentyten theme as a parent. I am trying to have the WYSIWYG editor use a custom stylesheet.
I added this to my functions.php file:
add_editor_style();
Then I created an editor-style.css file in my child theme's folder and added this:
html .mceContentBody {
max-width:591px;
}
When I go to the WYSIWYG editor and use firebug to check the css that is affecting the .mceContentBody element, I can see that is using my stylesheet, but it is being overrriden by the default editor-style.css sheet from the twentyten theme.
How can I force it to use my editor-style.css file and not the default one?
add_theme_support('editor_style');
before
add_editor_style('tinymce-styles.css');
assuming that your custom css is in your template's root folder.
Try redeclaring twentyten_setup in your theme's functions.php file. Just copy and paste the whole function from twentyten to your theme.
Check your CSS for errors. I spent hours pulling my hair out wondering why wordpress wasn't using my stylesheet. It wasn't even getting included. Turns out i had an extra { in my css.

Resources