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
Related
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.
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");
?>
Here is my code that is not working in wordpress theme. using this code trying to getting style.css file from wp root folder. what's problem in this code is any thing not correct like function name
<?php
function add_style() { wp_enqueue_style('style', get_stylesheet_uri()); }
add_action('wp_enqueue_scripts','add_style');
?>
But this code in wp function file is working correctly
register_nav_menus(array(
'primary' => __('Primary Menu')
)) ;
So can any one help me ?
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
add this to your header.php
function custom_scripts_method() {
/* CSS */
wp_enqueue_style( 'boostrap-style', get_template_directory_uri().'path to file from theme folder' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts_method' );
?>
add this in the functions.php file
and remember to use the : <?php wp_head(); ?>
in the head of your html
So I have created a wordpress template, and when i log in into wordpress there is a admin bar over main menu. This div wraps the other div's of the website.
My question is:
How can i set div margin-top: i.e. 50 pixels only when there is admin bar, ergo there is a user logged in?
EDIT:
So, this is my code of functions.php and it still doesnt work.
<?php
function new_excerpt_more( $more ) {
return '...<br /><br />Pročitaj još';
}
add_filter('excerpt_more', 'new_excerpt_more');
?>
<?php
if(is_admin_bar_showing() && !is_admin()) {
function link_to_stylesheet() {
?>
<style type="text/css">#wrapper{margin-top:150px;}</style>
<?php
}
add_action('wp_head', 'link_to_stylesheet');
}
?>
EDIT2:
I tried this too... It doesn't work.
<?php
if(is_admin_bar_showing() && !is_admin()) {
function link_to_stylesheet() {
?>
<style type="text/css">body{margin-top:150px;}</style>
<?php
}
add_action('wp_head', 'link_to_stylesheet');
}
?>
To apply top:50px in admin bar when on front end, you may try this (put this in functions.php)
if(is_admin_bar_showing() && !is_admin()) {
function link_to_stylesheet() {
?>
<style type="text/css">#wpadminbar {top:50px;}</style>
<?php
}
add_action('wp_head', 'link_to_stylesheet');
}
To remove admin bar completely, you may try this (put this in functions.php)
add_filter('show_admin_bar', '__return_false');
To remove admin bar from front end only for non-admin user (put this in functions.php)
add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
if (!current_user_can('administrator') && !is_admin()) {
show_admin_bar(false);
}
}
You can setup from your back end (only for yourself) from Users -> Your Profile menu by removing check from
Show Toolbar when viewing site check box
I solved this by adding
<?php if ( is_user_logged_in() ) { ?>
<style type="text/css" media="screen">
body{margin-top:28px !important;}
</style>
<?php } ?>
To the functions.php
Whenever anybody is logged in and has a WPadminbar on the front-end
add this to your functions.php:
function adminbar_theme_setup() {
add_theme_support( 'admin-bar', array( 'callback' => 'custom_admin_bar_css') );
}
add_action( 'after_setup_theme', 'adminbar_theme_setup' );
function custom_admin_bar_css() { ?>
<style>body{margin-top:28px !important;}</style>
<?php
}