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');
Related
I'm trying to remove both padding and the title of the dashboard page of the admin panel of WordPress. The dashboard was redesigned with the "Welcome Dashboard for elementor" + Elementor.
I tried this script:
var domainURL = window.location.origin;
var path = window.location.pathname;
if ((path == "/wp-admin/" || path == "/wp-admin" || path == "/wp-login.php") && domainURL+path)
{
document.getElementsByClassName("h1").style.display = "none";
}
It is not working. Would you have fixes or ideas to achieve this, please?
You have to inject the css into the wordpress header to actually modify the wordpress css admin console. In your function.php file add the following:
<?php function theme_admin_css() {
echo '
<style>
/* ... Your custom css goes here ... */
</style>
'; }
add_action( 'admin_head', 'theme_admin_css' ); ?>
Now to easily find your the element you want to target and style you can do the following:
In your browser: Right click on the element > Inspect.
Find your element in the source code: Right Click > Copy > Copy selector
Now you can paste your selector in-between the style tag and customize it.
One more thing, you should use the !important statement (eg: background-color:red!important)
In general, the <body> classes contain a unique class specific to that one page (e.g. page name), you could add this as the first selector to your CSS code.
If not, you can add a CSS classes to the <body> tag with admin_body_class
// Backend
function filter_admin_body_class( $classes ) {
// Current url
$current_url = '//' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
// Get last part from url. Expl: index.php
$last_part = basename( parse_url( $current_url, PHP_URL_PATH ) );
if ( $last_part == 'index.php' ) {
// String
$classes .= 'my-custom-backend-class';
}
return $classes;
}
add_filter( 'admin_body_class', 'filter_admin_body_class', 10, 1 );
Additional: For frontend pages you could use body_class
Note: The Conditional Tags of WooCommerce and WordPress can be used in your template files to change what content is displayed based on what conditions the page matches.
// Frontend
function filter_body_class( $classes ) {
// Returns true on the cart page.
if ( is_cart() ) {
// Array
$classes[] = 'my-custom-frontend-class';
}
return $classes;
}
add_filter( 'body_class', 'filter_body_class', 10, 1 );
We try to apply a certain css rule to a product backend page not the frontend page.
But there are 2 types of pages one which is when you click create product and one when you click edit product.
We need to apply the css rule to both of these pages.
We achieved half of the answer by determining part of url when we click add product in the backend by the solution below:
add_action( 'init', 'bbloomer_apply_css_if_url_contains_string' );
function bbloomer_apply_css_if_url_contains_string() {
$url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if(false !== strpos( $url, 'post_type=product' )){
echo '<style type="text/css">
#ovaem_sectionid { display: none !important }
</style>';
}
}
We hope if there is a thing like (is_Product) but for the backend can be used for both when adding a new product or when editing an existing product page to apply this css.
<body> contains .post-type-product class, use it as the first selector
function my_custom_css() {
echo '<style>
.post-type-product #ovaem_sectionid {
display: none !important;
}
</style>';
}
add_action('admin_head', 'my_custom_css' );
I have a lot of CSS scripts in my WordPress plugin which may affect the other WordPress tags, such as form as an example:
.form {
padding:30px;
background-color:#fff;
}
I can change the CSS, but I want to have a script which only allows the stylesheet to show on the plugin page.
So to clear it up, currently the stylesheet <link> is always in the source code of the admin panel, but I want a script which only puts the stylesheet <link> in the source code when the user is on the plugin page.
You can use get_current_screen:
$screen = get_current_screen();
if ( $screen->id == 'your_plugin_page' ) ){
$custom_css = ".form {.....}";
wp_add_inline_style( 'your_main_style_handle', $custom_css );
}
Update 1:
To add a submenu to your admin menu:
add_action( 'admin_menu', 'your_plugin_admin_menu' );
//Add this to register you styles
add_action( 'admin_init', 'your_plugin_admin_init' );
then:
/**
* Register your stylesheet.
*/
function wpdocs_plugin_admin_init() {
wp_register_style('your-style', plugins_url('scripts/jquery-ui.css',__FILE__ ));
wp_register_script( 'jquery-ui', plugins_url('scripts/jquery-ui.js',__FILE__ ));
}
/**
* Register your plugin page and hook stylesheet loading.
*/
function your_plugin_admin_menu() {
$page = add_submenu_page(...., 'your_plugin_manage_menu' );
//Call 'your_plugin_admin_styles' only on the plugin’s options page
add_action( "admin_print_styles-{$page}", 'your_plugin_admin_styles');
}
/**
* Enqueue our stylesheet.
*/
function your_plugin_admin_styles() {
wp_enqueue_style('your-style');
wp_enqueue_script('jquery-ui');
$custom_css = ".form {.....}";
wp_add_inline_style( 'your-style', $custom_css );
}
/**
* Output our admin page.
*/
function your_plugin_manage_menu() {
// ...
}
you can create style-sheet, and create hook for that style-sheet reference. Then you can add WordPress using add_action(), within plugin call, where you like to call that script. So it will be referenced at head of page for on specified page as needed.
Read more on
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/add_action/
I am new to wordpress theme development and I need to style the main navigation menu depending on what page the user is on.
Simply put, only the home page has a unique styling on it and all other pages will have a different css. I have tried adding this in my functions.php but it does not work.
if (is_page( 52 ) ):
wp_enqueue_style('style1_css', get_template_directory_uri() . '/css/style1.css' );
endif;
Sorry if its badly explained!
<?php // TOP PICTURE DEFINITION FOR ARTICLES PAGE
if ( is_page()) {
wp_enqueue_style('style1_css', get_template_directory_uri() . '/css/style1.css' );
}
?>
Use like this for detailed reference kindly refer this link click_here
You can link one css file for all pages and use more specific selectors (with binging to css-classes) for css ruling:
.nav {/* for all pages */
...
}
.home .nav { /* for home page */
...
}
Target only the home class like:
.home .nav {
// CSS STUFF
}
And if you want all nav classes, use:
.nav {
// CSS STUFF
}
fixed it by adding
nav <?php if ( is_page('52')) { echo 'class="homeNav"'; } ?>>
I wish to centre the entry-title on certain pages in my Wordpress template using a body_class_filter. This will be based on the page template that is used.
e.g. Any page that uses page template pageshow.php should have custom CSS to centre the title.
I have read a few tutorials and comprehend what needs to be done. But my solution attempt isn't working. Here's what I tried...
I put the below at the bottom of my functions.php file...
if (is_page_template('pageshow.php'))
{ // Returns true when 'pageshow.php' is being used.
function my_class_names($classes)
{ // add 'class-name' to the $classes array
$classes[] = 'pageshowclass';
return $classes; // return the $classes array
}
// Now add pageshowclass class to the filter
add_filter('body_class', 'my_class_names');
}
else
{ // Returns false when 'about.php' is not being used.
}
And the below in my stylesheet...
/* Custom Page Styling by ID */
.pageshowclass h1.entry-title {
text-align: center;
}
But the class is not applied, nor is the css. Here is some useful doco.
Make sure your theme supports body_class. It should have the following in the body tag:
<body <?php body_class(); ?>>
If it does, check that your if condition is returning true, eg:
if (is_page_template('pageshow.php')){
echo 'ITS WORKING';
}