usually I used enqueue like this
wp_enqueue_style( 'mystyle', get_stylesheet_directory_uri() . '/css/style.css',false,'1.1','all');
however a created a custom field and want to enqueue a style that is inside a function
function advanced_css() {
$advanced_css = get_field('advanced_css');
echo $advanced_css;
echo '<style type="text/css">';
echo $advanced_css;
echo '</div>';
}
how do I call the function?
You call the function like: advanced_css();
I think more your question is WHERE to call that function? Your first snippet is much more correct - that's the way to enqueue in WordPress. However if this style needs to be an editable field stored in the database - you can call the function to output your css pretty well wherever you want it to go. Probably the best place would be using the wp_head or wp_footer hook.
Did you try?
add_action('wp_head', 'your_custom_styles');
function your_custom_styles()
{
$advanced_css = get_field('advanced_css');
echo '<style type="text/css">';
echo $advanced_css;
echo '</style>';
}
It should print styles in the head tag on your page.
Related
I've got a page template which is acting as a 'Landing Page' and doesn't need specific styles from other areas of the website.
I've managed to remove the unwanted styles and add the new styles by targeting the page ID but I need it to only happen when it's a particular page template. I can't seem to get it to work when doing a check against the page template via the is_page_template() function.
In functions.php:
if ( !function_exists('scripts_and_css') ) {
function scripts_and_css() {
if(is_page(79806))
{
wp_enqueue_style('landingpage', get_stylesheet_directory_uri() . '/css/landing__page.css', '', null);
wp_enqueue_script('landingpage', get_stylesheet_directory_uri() . '/js/landing-page.js', null);
wp_dequeue_style( 'layout', get_template_directory_uri().'/css/layout.css', '', null );
}
}
}
add_action('wp_enqueue_scripts', 'scripts_and_css');
If I then change this to use the template name, it completely fails and doesn't load or remove any of the scripts or stylesheets.
My page template filename called page-landing-page.php:
<?php
/**
* Template Name: Landing Page
* The template for displaying the content for the landing pages.
?>
<?php wp_head(); ?>
// Got all my content loading in here.
<?php wp_footer(); ?>
Here's an example of what I've tried up to now in the functions.php fle:
if(is_page_template('Landing Page'))
{
// Enqueue / Dequeue scripts / styles
}
--
if(is_page_template('page-landing-page.php')) // This is the name of my page template
{
// Enqueue / Dequeue scripts / styles
}
--
if(is_page_template('landing-page.php')) // This is the name of my page template
{
// Enqueue / Dequeue scripts / styles
}
--
if(is_page_template('landing-page')) // This is the name of my page template
{
// Enqueue / Dequeue scripts / styles
}
Just cannot seem to get it to work. Any guidance would be appreciated!
This one works perfectly.
function my_enqueue_stuff() {
// "page-templates/about.php" is the path of the template file. If your template file is in Theme's root folder, then use it as "about.php".
if(is_page_template( 'page-templates/about.php' ))
{
wp_enqueue_script( 'lightgallery-js', get_template_directory_uri() . '/js/lightgallery-all.min.js');
wp_enqueue_script('raventours-picturefill', "https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js", true, null);
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );
For some reason, if you do not select the page template from the Template Dropdown on the edit page, is_page_template('template-name.php') doesn't seem to work.
I have found a kind-of-a-hacked solution to your problem. It seems to be working for both of the cases. Either you select the page template from the dropdown or the template gets selected by the page-slug.
if( basename( get_page_template() ) == 'page-price-watch.php' )
{
// Enqueue / Dequeue scripts / styles
}
Thanks.
"is_page_template" works by checking the post meta. If the template is automatically pulled, for example because it's called home.php, the template being used is not filled into the meta. Meta is only filled when actively selecting the template for a page in the editor.
These always work and do not rely on the meta:
function your_enqueue_styles() {
if (is_front_page()) {
//works
}
if (is_page( array('pageslug1', 'pageslug2'))) {
//works
}
global $template;
if (basename($template) === 'template-name.php') {
//works
}
}
add_action( 'wp_enqueue_scripts', 'your_enqueue_styles' );
Try something like this to display the currently used page template at the bottom of the page when viewed as an admin, makes it easier to troubleshoot:
// Page template finder
function show_template() {
if( is_super_admin() ){
global $template;
$output = '<div style="position: absolute; bottom: 0; width: 100%; text-align: center; z-index: 100; background-color: white; color: black;">';
ob_start();
print_r($template);
$output .= ob_get_clean().'</div>';
echo $output;
}
}
add_action('wp_footer', 'show_template');
My custom wordpress plugin shortcode is working when I just return something. But I want to return another php page, which includes html.
This is my map.php
<?php
function example($map){
echo "Hello!";
}
?>
I've tried like this
add_shortcode( 'map_shortcode', 'map_shortcode' );
function map_shortcode() {
wp_enqueue_style( 'my-css' );
wp_enqueue_style( 'meyer-reset' );
wp_enqueue_style( 'tooltipster-bundle' );
wp_enqueue_script( 'mypluginscript' );
return $map;}
?>
I mean the shortcode works; when I tried just a simple string like 'abc' it showed, so it works, but I want to show the other page on the return function.
To show an HTML view using WordPress shortcode, you can use ob_start() and ob_get_clean() functions.
https://www.php.net/manual/en/function.ob-start.php
https://www.php.net/manual/en/function.ob-get-clean.php
<?php
function map_shortcode() {
ob_start();
?>
<!-- Your HTML codes here ... -->
<?php
return ob_get_clean();
}
add_shortcode("map_shortcode", "map_shortcode");
?>
I have a page speed issue, the theme I bought is really crappy but i cannot change it now. I use WP_rocket, server have HTTP2 but still it is to many resources to load. So i try to reduce numbers of styles by wp_deregister_style and load it only when need. For example contact-form-7 front-end style I need only in .../contact page. It good idea ? Or it could be harmful?
function rs_deregister_css () {
global $wp;
$url = home_url( $wp->request);
$contakt = strpos($url,'contakt');
if (!$contakt) {
wp_deregister_style('contact-form-7');
}
}
add_action( 'wp_print_styles', 'rs_deregister_css', 99);
Yes, its a very good idea since you only use the contact form in the contact page, don't forget to deregister the javascript file, too
if (!$contakt) {
wp_deregister_style('contact-form-7');
wp_deregister_script('contact-form-7');
}
Yes, it would be a good idea for your load time. But I suggest you to load style on specific instead of checking the URL and unload it every time.
Try to read Conditional Tags
function my_enqueue_stuff() {
if ( is_front_page() ) {
/** Call landing-page-template-one enqueue */
wp_enqueue_style( 'your-style-handle', get_stylesheet_directory_uri() . '/yourfile.css' );
} else {
/** Call regular enqueue */
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );
EDIT
Since you only want to the style or javascript load for specific pages, then add this code to your functions.php:
function remove_wpcf7_extras() {
remove_action('wp_print_scripts', 'wpcf7_enqueue_scripts');
remove_action('wp_print_styles', 'wpcf7_enqueue_styles');
}
if( !is_page('contact') ) {
add_action('wp_head', 'remove_wpcf7_extras');
}
css conditioning if user is in homepage of wordpress?
I put this
<?php if(is_home()) {
echo '<link rel="stylesheet" href="customHome.css">'
} ?>
into my page editor and it did applied the css. but because it's using echo so there will be some bug. it echo out some thing like
> echo ' ‘ } ?>
in the end of the post.
I want to know where else should I include that? I tried to put in header but it doesn't work.
You can append css by using wp_enqueue_scripts like;
function custom_css() {
if (is_home()) {
wp_enqueue_style( 'custom_style_name', 'path_to_your_css' );
}
}
add_action( 'wp_enqueue_scripts', 'custom_css' );
Put above code block to functions.php
Here is how my current action hook example: it changes the meta description of the HTML page.
add_action( 'wp_head', 'add_a_description' );
function add_a_description () {
echo '<meta name="description" content=" This is new content" />' . "
";
} // End example
Now to me (I have some basic PHP knowledge, nothing more), it looks like the function is being called before it's been made. My intuition tells me that it should look like:
function add_a_description () {
echo '<meta name="description" content=" This is new content" />' . "
";}
add_action( 'wp_head', 'add_a_description' ); // End example
I understand this isn't the case, but I don't know why. Could someone explain it to me?
It does not matter where you write the action hook both will work:
add_action( 'wp_head', 'add_a_description' );
function add_a_description () {
echo '<meta name="description" content=" This is new content" />' . "";
}
and
function add_a_description () {
echo '<meta name="description" content=" This is new content" />' . "";
}
add_action( 'wp_head', 'add_a_description' ); // End example
These both will work. It does not matter where you declare the function, the only thing is that the function should be included in the script.
This is because the whole file is first parsed and then executed.
From PHP Manual
Functions need not be defined before they are referenced, except when a function is conditionally defined.
Regarding the wp_head action hook. The wp_head function resides inside wp-includes/general-template.php
If you look at that function it will call do_action('wp_head');
What this does is that, it will check for all actions and filters defined with wp_head hook which is stored in the global variable $wp_actions
If there is a hook in for wp_head it will call the hooked function using call_user_func_array
Hope this helps you :-)
Without knowing all of the inner workings, you can think of add_action() as simple function which passes the name of a function to be called at a certain point. In your code, add_action() lets the system know to call the function add_a_description() when it reaches the wp_head point.
Here's a VERY basic example of how the code works:
// Start of example system
$actions = array();
function add_action($point, $name) {
global $actions;
$actions[$point][] = $name;
}
function run($point) {
global $actions;
foreach ($actions[$point] as $name)
$name();
}
// End of example system
// Start of example plugin / theme function
add_action('wp_head', 'alert');
function alert() {
echo 'hello';
}
// End of example plugin / theme function
// At point wp_head
run('wp_head');