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';
}
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'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');
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"'; } ?>>
Within Wordpress header.php, I have
<body <?php body_class($class); ?>>
How do check to see if a specific class exists, and then load markup as a result?
For ex.
<body class"home logged-in">
<?php if $class == 'home' ?>
<div class="home"></div>
<? else : ?>
<div class="internal-page"></div>
<? endif; ?>
Thanks!
If you really, really need to use different markup based on the body_class classes, then use get_body_class
$classes = get_body_class();
if (in_array('home',$classes)) {
// your markup
} else {
// some other markup
}
But there are probably better ways to do this, like #Rob's suggestion of Conditional Tags. Those map pretty closely to the classes used by body_class.
You can access body_class with a filter add_filter('body_class', function ...) however, I think you are taking the wrong approach. Why not just use css for what you need? For example, .home>div { /* home styles */ }
Or you can load a different stylesheet
add_filter('body_class', function($classes) {
if (in_array('home', $classes)) {
wp_enqueue_style('home');
}
return $classes;
});
I have had the same problem as I created pages using different templates but a custom sub-menu needed to be the same on each pages.
I tried this one first what is failed
<body <?php body_class( 'extra-class' ); ?>>
The extra classes was added to the body tag but when I run the error log then it was not in the classes array. So I was sure it was added later to the body tag.
This solution worked for me:
functions.php
$GLOBALS['extraBodyClass'] = '';
In the template file
<?php $GLOBALS['extraBodyClass'] = 'extra-class' ?> - very first line in the template file
<body <?php body_class( $GLOBALS['extraBodyClass'] ); ?>> - after the template name declaration
In the header.php file
$classes = get_body_class();
if($GLOBALS['extraBodyClass']){
$classes[] = $GLOBALS['extraBodyClass'];
}