how to add stylesheet to my custom template file - php

I have created a new template for my wordpress page.here , the stylesheet i am adding is not reflecting on the page. how can i do that??
<?php
/*
* Template Name: Home Template
*/
get_header();
add_action('wp_enqueue_scripts', 'add_css_js');
function add_css_js(){
wp_enqueue_style('homepage', get_stylesheet_directory_uri() . '/styles/homepage.css');
}
function template_format_home($classes) {
$classes[] = 'home';
return $classes;
}
add_filter( 'body_class', 'template_format_home' );
?>

add this code wp_enqueue_style('style', get_template_directory_uri().'/styles/homepage.css', false); to your functions.php file and delete the following code
add_action('wp_enqueue_scripts', 'add_css_js');
function add_css_js(){
wp_enqueue_style('homepage', get_stylesheet_directory_uri() . '/styles/homepage.css');
}
from your home page. I think it works that way

Related

How do I properly use an action hook to enqueue my CSS file in WordPress through using functions.php?

I have been trying to get this code to work in my child theme's functions.php file in order to properly enqueue my custom CSS file to my template file/page called "dashboard". From what I understand, the functions.php file is loaded before the main query, so I am using an action hook with a callback that is shown below. But it just doesn't seem to work. Much help would be appreciated.
functions.php
add_action('get_header', function() {
if(is_page('dashboard')) {
function enqueue_style() {
wp_enqueue_style( 'dashboard-css', 'https://myurl.com/wp-content/themes/astra-child/css/dashboard.css', false );
}
add_action( 'wp_enqueue_scripts', 'enqueue_style' );
}
});
dashboard.php
<?php /*Template Name: User Dashboard*/?>
<head>
</head>
<body>
<p>this is my dashboard</p>
</body>
Try code like this in functions.php file.
function enqueue_style() {
global $wp_styles, $wp_scripts;
$protocol = is_ssl() ? 'https' : 'http';
if(is_page('dashboard')) {
// Register
wp_register_style('dashboard-css', get_stylesheet_directory_uri() . '/css/dashboard.css');
// Enqueue
wp_enqueue_style('dashboard-css');
}
}
add_action('wp_enqueue_scripts', 'enqueue_style');

How to enqueue styles for one specific page template

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');

Calling a custom footer in Genesis based on page template

I am using the Genesis framework and need to load a custom footer when a certain page template loads, but I am having issues passing the page template file name into the function. I cannot use the slug because the template can be used for multiple pages, so I really need to use the template file name instead. I believe I'm on the right path with what I have so far, but I don't quite understand what I'm reading about get_query_var and how it can help pass the value into my function.
So far my code is as follows:
remove_action( 'genesis_footer', 'genesis_do_footer' );
if (is_page_template( 'page-alternate.php' )) {
add_action( 'genesis_footer', 'do_alternate_footer' );
} else {
add_action( 'genesis_footer', 'do_main_footer' );
}
function do_alternate_footer() {
echo 'xxx';
}
function do_main_footer() {
echo 'yyy';
}
Any assistance would be greatly appreciated. Thank you
The "Is Page Template" function actually looks for the template page name not the file so in this example if the page template name was "alternate" you would have:
remove_action( 'genesis_footer', 'genesis_do_footer' );
$CurrPageTemplate = get_page_template_slug( get_queried_object_id() );
if ($CurrPageTemplate == 'page-alternate.php' ) {
add_action( 'genesis_footer', 'do_alternate_footer' );
} else {
add_action( 'genesis_footer', 'do_main_footer' );
}
function do_alternate_footer() {
echo 'xxx';
}
function do_main_footer() {
echo 'yyy';
}
See how you go with that.

Best way to disable all styles, scripts and meta tags in Wordpress

I have a blog (using twentyfifteen child theme) and a page where I have to disable all styles, scripts and meta tags which are added by WordPress except meta tags which are added by All in One Seo Pack plugin.
I'm new in Wordpress, I tried to use define('WP_USE_THEMES', false) in template of this page and nothing happened (visually). I know that there are functions like wp_dequeue_style(), but I can't check in functions.php whether current page is the page described above.
What is the best way to achieve this?
There are two functions
style_dequeue_function() it will remove all Styles.
script_dequeue_function() it will remove all Scripts.
All you need to provide page slug or template name.
$pageSlug where you want to hide WordPress styles and scripts.
OR
$Template_Name By Template Name
And remove_action will remove WordPress generator tag.
remove_action('wp_head', 'wp_generator');
Note : It will only deque style or scripts which was added by WP enque functions.
for e.g :
wp_register_script( 'site', get_template_directory_uri().'/js/site.js', array( 'jquery' ) );
wp_enqueue_script( 'site' );
wp_register_style( 'screen', get_template_directory_uri().'/style.css', '', '', 'screen' );
wp_enqueue_style( 'screen' );
function style_dequeue_function()
{
global $wp_styles;
$array = array();
// Runs through the queue styles
foreach ($wp_styles->queue as $handle) :
$array[] = $handle;
endforeach;
wp_dequeue_style($array);
wp_deregister_style($array);
}
function script_dequeue_function()
{
global $wp_scripts;
$array = array();
// Runs through the queue scripts
foreach ($wp_scripts->queue as $handle) :
$array[] = $handle;
endforeach;
wp_dequeue_script($array);
wp_dequeue_script($array);
}
add_action( 'wp_head', 'HideWpGeneratorAndScripts' );
function HideWpGeneratorAndScripts()
{
$pageSlug = "Your Page Slug here.";
$Template_Name = "Your Custom Template Name here.";
if(is_page($pageSlug)) {
add_action('wp_enqueue_scripts', 'style_dequeue_function');
add_action('wp_enqueue_scripts', 'script_dequeue_function');
remove_action('wp_head', 'wp_generator');
}
else if(is_page_template($Template_Name)) {
add_action('wp_enqueue_scripts', 'style_dequeue_function');
add_action('wp_enqueue_scripts', 'script_dequeue_function');
remove_action('wp_head', 'wp_generator');
}
}

Run JS only on pages with my widget

I'm trying to get a widget to only load javascript on a page where the widget is present.
I've tried adding the add action in the 'showWidget' didn't work.
What am I doing wrong?
PHP
wp_register_sidebar_widget('MyWidget','MyWidget', 'showWidget');
add_action('wp_enqueue_scripts', 'addScript'); //now the script appears on every page
function addScript()
{
wp_register_script('MyWidgetJs', plugins_url( '/script.js' , __FILE__), array('jquery'));
wp_enqueue_script('MyWidgetJs');
}
function showWidget($args)
{
// add_action('wp_enqueue_scripts', 'addScript'); //I tried this but it doesn't work :(
wp_enqueue_script('MyWidgetJs');
extract($args);
/* do widget stuff */
}
Seems that the new version of WordPress supports this: http://codex.wordpress.org/Version_3.3
Register your script, but don't enqueue it. In your widget PHP, add in the wp_enqueue_script('your_script_name'); and it'll load it only when your widget is used and place it in the footer.
You are going to upgrade to 3.3, right? :)
SO, something like this should work just fine:
wp_register_sidebar_widget('MyWidget','MyWidget', 'showWidget');
function showWidget($args) {
wp_enqueue_script('MyWidgetJs');
extract($args);
/* do widget stuff */
}
You want to use is_active_widget() conditional to do something like:
<?php
if ( is_active_widget('MyWidget') ) {
add_action('wp_enqueue_scripts', 'addScript');
}
?>
using your above code the final widget may look like:
<?php
if ( is_active_widget('MyWidget') ) {
add_action('wp_enqueue_scripts', 'addScript');
}
function addScript()
{
wp_register_script('MyWidgetJs', plugins_url( '/script.js' , __FILE__), array('jquery'));
wp_enqueue_script('MyWidgetJs');
}
function showWidget($args)
{
wp_enqueue_script('MyWidgetJs');
extract($args);
/* do widget stuff */
}

Categories