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"'; } ?>>
Related
I'm trying to add a piece of code to change css on a page. I added the code to functions.php in WordPress. However, it does not seem to work. Since I'm quite new to this there might be something quite basic wrong with the code... Any idea why it might not be working?
// This code is added to functions.php
// intro is the class name of the element I'm trying to change
add_action( 'intro', function () {
if ( is_user_logged_in() ) {
?>
<style>
display: none!important;
</style>
<?php
};
exit;
});
I got it to work by removing exit; and targeting an element:
add_action( 'wp_head', function () {
if ( is_user_logged_in() ) {
?>
<style>
.intro{
display: none!important;
}
</style>
<?php
};
});
I think what you are trying to do is change the content of the css class which I do not think you can do. Instead a solution would be to assign a css class with the propertied that you want applied to the element e.g.
<div class="<?php if ( is_user_logged_in() ) { echo 'intro';} ?>">
// Whatever you have here will get the css style applied
// if user is logged in
</div>
And inn The CSS you have the following
.intro{
display: none!important;
}
You can create multiple files for different styles e.g. another class
.outro{
display:initial;
}
And you can add it in the code as
<div class="<?php if ( is_user_logged_in() ) { echo 'intro';} else{ echo 'outro';} ?>">
// Whatever you have here will get the css style applied
// if user is logged in and if logged out then outro class will be applied
</div>
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 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 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';
}