My current PHP code is working and styling my "Theme Options" page (located under the WP API Appearance menu) the way I want it to look, however...
The CSS stylesheet is also being applied to every other menu in the WP dashboard (such as affecting the "Settings > General-Options") page too. How am I able to go about applying the stylesheet just to my "Theme Options" page only and not tamper with anything else?
My stylesheet is named 'theme-options.css", located within a folder called "include" > include/theme-options.css. The code below is placed within a "theme-options.php" page.
<?php
// Add our CSS Styling
add_action( 'admin_menu', 'admin_enqueue_scripts' );
function admin_enqueue_scripts() {
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );
}
I was placing the CSS & JS files separately from the building blocks of my page (just above that function). The code is now inside my page build function and I am now getting the results I was after.
Previously:
...
// Add our CSS Styling
function theme_admin_enqueue_scripts( $hook_suffix ) {
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css', false, '1.0' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js', array( 'jquery' ), '1.0' );
// Build our Page
function build_options_page() {
ob_start(); ?>
<div class="wrap">
<?php screen_icon();?>
<h2>Theme Options</h2>
<form method="post" action="options.php" enctype="multipart/form-data">
...
...
Solution:
// Build our Page
function build_options_page() {
// Add our CSS Styling
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );
ob_start(); ?>
<div class="wrap">
<?php screen_icon();?>
<h2>Theme Options</h2>
<form method="post" action="options.php" enctype="multipart/form-data">
...
...
You could only add the css file if the current page is your special page by checking the page before, e.g.:
if (is_page('Theme Options')) { // check post_title, post_name or ID here
add_action( 'admin_menu', 'admin_enqueue_scripts' );
}
=== UPDATE ===
Maybe it is better to check in the function:
<?php
// Add our CSS Styling
add_action( 'admin_menu', 'admin_enqueue_scripts' );
function admin_enqueue_scripts() {
if (is_page('Theme Options')) { // check post_title, post_name or ID here
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
}
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );
}
Related
i uploaded a custom theme on wordpress as a parent theme but the problem is only simple text is showing on the screen no style is working no image or slider is working except blue text. As i am new in php i do not know how to enqueue the style in functions.php.
Here is my functions.php:
<?php
wp_enqueue_style( 'flattern-style', get_stylesheet_uri() ); //default
wp_enqueue_style( 'custom-style’, get_template_directory_uri() . ‘/custom.css' ); //our stylesheet
add_action( 'wp_enqueue_scripts', 'flattern_scripts_styles' );
?>
wp_enqueue_style and wp_enqueue_script must inside of wp_enqueue_scripts action hook callback function check code below.
<?php
function flattern_scripts_styles(){
wp_enqueue_style('flattern-style', get_template_directory_uri() . '/assets/css/style.css', array(), time(), false);
wp_enqueue_style( 'custom-style’, get_template_directory_uri() . ‘/custom.css' ); //our stylesheet
}
add_action( 'wp_enqueue_scripts', 'flattern_scripts_styles' );
I have been struggling with diagnosing a bug on a project for hours now. I have currently narrowed it down to what is happening, I'm just not sure why:
I have a template partial called "testimonials.php" which enqueues styles at the top of the file:
<?php
add_action("wp_enqueue_scripts", function() {
wp_enqueue_style("testimonials-style", get_stylesheet_directory_uri() . "/partials/testimonials.css");
});
?>
However, when I try to render this as a partial in a parent template, using get_template_part('partials/testimonials') the partial is rendered, but the CSS is not enqueued. Same for enqueueing JS files. I have verified that the pathways are correct, etc.
If I enqueue the style in the parent Template, then the styles show up.
Do I really need to enqueue the styles into every parent template in which I wish to include this partial?? I must be missing something, because this doesn't seem modular at all!
Can someone please help?
Try this
CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
JS
function wpdocs_scripts_method() {
wp_enqueue_script( 'form-script', get_template_directory_uri() . '/js/form.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
<?php
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet() {
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/partials/testimonials.css', false, '1.0', 'all' );
}
For more understanding you can see following doc
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
function mytheme_scripts_styles() {
wp_enqueue_script( 'app-script', get_template_directory_uri() . '/assets/js/app.6e31112b.js', array('jquery'), 1.0, true);
wp_enqueue_style('app-css', get_stylesheet_directory_uri() . "/assets/css/build.css",false,'','all');
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts_styles' );
I have tried using the following code to embed Bootstrap to Wordpress but it doesn't work. Need help..........
<?php
function resources() {
wp_enqueue_style('style',get_stylesheet_uri());
wp_enqueue_style('bootstrap.min',get_template_directory_uri().'/css/bootstrap.min.css');
wp_enqueue_style('bootstrap',get_template_directory_uri().'/css/bootstrap.css');
wp_enqueue_style('bootstrap-theme.min',get_template_directory_uri().'/css/bootstrap-theme.min.css');
}
add_action('wp_enqueue_scripts', 'resources');
This may be helpful to you
WordPress is to use wp_enqueue_style and wp_enqueue_script from within functions.php. In particular, we need to create a new function that adds (or enqueues) the css style and the js script and then allow WordPress to call it at the right moment by adding a wp_enqueue_scripts action.
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
For Reference: click here
In order towp_enqueue_scripts in function.php work properly, <?php wp_head(); ?> needs to be placed before the closing </head> and <?php wp_footer(); ?> before closing </body> tag in your template file.
Because you didn't post your template file, so I think this can be a reason causes your problem.
Hope this help
Just use the bootstrap CDN - https://www.bootstrapcdn.com/
In your child theme find the function theme_enqueue_styles() and add the two lines of extra code shown below.
function theme_enqueue_styles() {
// Add the following two lines //
wp_enqueue_style( 'bootstrap-cdn-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-cdn-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' );
// ------ -------//
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
Make sure your file location of downloaded bootstrap files. and put this code into functions.php
1.stylesheet CSS file
2.script js file
<?php
function load_stylesheets()
{
// enqueue parent styles
wp_enqueue_style('bootstrap', get_stylesheet_directory_uri().' /css/bootstrap.min.css');
wp_enqueue_script('bootstrap', get_stylesheet_directory_uri().' /js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts','load_stylesheets');
?>
I've been following a tutorial online thats taught me how to enqueue stylesheets for Wordpress with the functions folder instead of the headerusing the following code:
function lucieaverillphotography_scripts() {
wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() ); }
Followed by:
add_action( 'wp_enqueue_scripts', 'lucieaverillphotography_scripts' );
This has worked, but when I tried to enqueue a separate stylesheet for a page template, it won't work. Here is the code I used, I put it between the two above:
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_style( 'lucieaverillphotography-full-page' ,
get_template_directory_uri() . '/css/full-page.css');
}
else { wp_enqueue_style( 'lucieaverillphotography_style',
get_template_directory_uri() . '/style.css'); }
I have a feeling that it's something to do with the last part: '/style.css' ... but the only way I can get my theme to recognise the new stylesheet is by adding: '/css/full-page.css' in its place and then it uses the new stylesheet for every page rather than the page template.
If I change it by adding the name of the folder that contains style.css - i.e '/files/style.css' , I lose all my css altogether, which is puzzling as I thought this was the most obvious thing to try.
Try This in functions.php
function lucieaverillphotography_scripts() {
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_style( 'lucieaverillphotography-full-page' , get_template_directory_uri() . '/css/full-page.css');
}
else{
wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'lucieaverillphotography_scripts' );
I have a query to get a post in wordpress:
<?php
$page_content = get_page(2);
echo do_shortcode($page_content->post_content);
?>
The page that is being loaded has a shortcode in it that loads a slider. The slider markup is loading but the javascript and css files required for the plugin are not showing up in the source code. How can I fix this?
you did not supply any relative source code or link, but did you load the JS and css ?
Is the slider comes from a plugin ? is it your plugin ? is the plugin activated for said page ? did you enqueue your styles and scripts ??
Anyhow, as a first measure , try to load it manually on the page
function my_scripts_enq()
{
// Register the script for a plugin:
wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
// or
// Register the script for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
// then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enq' );
For fast debug you can can simply try :
if( is_page(42) ){
add_action( 'wp_enqueue_scripts', 'my_scripts_enq' );
}
for styles you should do :
function load_styles()
{
// Register the style for a plugin:
wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
// or
// Register the style for a theme:
wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), 'se16205117', 'all' );
// then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'load_styles' );
BTW - as a side note , From codex
$page_id = 2;
$page_data = get_page( $page_id );
// You must pass in a variable to the get_page function. If you pass
in a value (e.g. get_page ( 123 ); ), WordPress will generate an
error. By default, this will return an object.