Wordpress get_page() and plugin shortcode not working - php

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.

Related

How to run script for specific page from child-theme?

I'm working on a project that I have a child-theme on which I'm running specific functions from the function.php file.
My problem is that when I try to add an if condition to only run the script on a specific page, it doesn't work.
I'm using the functions.php from the child theme.
In other words... I need to be able to get the current page on the child theme.
What am I doing wrong?
add_action(
'init', function() {
if (is_page('contact')) {
wp_register_script( 'my-func', get_stylesheet_directory_uri() . 'my-func.js', '', '', false );
wp_enqueue_script( 'my-func' );
}
}
);
Thanks
for theme code will go to your functions.php file and for plugin code will go to the public functions.
add_action( 'wp_enqueue_scripts', 'my_assets' );
function my_assets()
{
if (is_page('booking')) {
/* for plugin */
wp_enqueue_style($this->plugin_name, plugin_dir_url(__FILE__) . 'css/custom.css', array(), $this->version, 'all');
/*for theme */
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
}

i uploaded a custom theme on wordpress but its style is not working i cannot enqueue the style

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

Override theme styles with plugin styles

I am writing a custom WordPress plugin, I am using the OceanWP Theme with Elementor, and am trying to enqueue/register Bootstrap 4.5 styles/scripts as well as my own custom styles/scripts.
However, OceanWP's styles are still taking precedence being used instead of my styles/scripts.
Currently, I am trying to over ride the themes assets by upping the priority in the add_action hook but am not having any luck.
I am trying to display a custom multi-part form and display it on a page using a shortcode.
public function __construct()
{
//set dirpath
$this->_dirpath = dirname(__FILE__);
add_action('wp_enqueue_scripts', array($this, 'cmmc_styles'), 9999);
add_action('wp_footer', array($this, 'cmmc_scripts'));
add_shortcode("sme-cmmc-form", array($this, "displayCmmcForm"));
}
public function cmmc_scripts()
{
///wp_enqueue_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all');
wp_enqueue_script('popper_js', 'https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js', array('jquery'), NULL, true);
wp_enqueue_script('bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array('jquery'), NULL, true);
wp_enqueue_script('cmmc_js', plugin_dir_url( __FILE__ ) . 'assets/js/app.js', array('jquery'), '1.0' );
//wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));
}
public function cmmc_styles() {
wp_register_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_style('bootstrap_css');
wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));
}
Can someone please tell me how I could possibly over ride the themes styles, even if it is just for this plugin, or dequeue the styles for this single page temporarily?
EDIT: to add in the enqueued styles and scripts from the theme
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'theme_css' ) );
// Load his file in last.
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'custom_style_css' ), 9999 );
// Remove Customizer CSS script from Front-end.
add_action( 'init', array( 'OCEANWP_Theme_Class', 'remove_customizer_custom_css' ) );
// Load theme js.
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'theme_js' ) );
/**
* Load front-end scripts
*
* #since 1.0.0
*/
public static function theme_css() {
// Define dir.
$dir = OCEANWP_CSS_DIR_URI;
$theme_version = OCEANWP_THEME_VERSION;
// Remove font awesome style from plugins.
wp_deregister_style( 'font-awesome' );
wp_deregister_style( 'fontawesome' );
// Load font awesome style.
wp_enqueue_style( 'font-awesome', OCEANWP_THEME_URI . '/assets/fonts/fontawesome/css/all.min.css', false, '5.11.2' );
// Register simple line icons style.
wp_enqueue_style( 'simple-line-icons', $dir . 'third/simple-line-icons.min.css', false, '2.4.0' );
// Register the lightbox style.
wp_enqueue_style( 'magnific-popup', $dir . 'third/magnific-popup.min.css', false, '1.0.0' );
// Register the slick style.
wp_enqueue_style( 'slick', $dir . 'third/slick.min.css', false, '1.6.0' );
// Main Style.css File.
wp_enqueue_style( 'oceanwp-style', $dir . 'style.min.css', false, $theme_version );
// Register hamburgers buttons to easily use them.
wp_register_style( 'oceanwp-hamburgers', $dir . 'third/hamburgers/hamburgers.min.css', false, $theme_version );
// Register hamburgers buttons styles.
$hamburgers = oceanwp_hamburgers_styles();
foreach ( $hamburgers as $class => $name ) {
wp_register_style( 'oceanwp-' . $class . '', $dir . 'third/hamburgers/types/' . $class . '.css', false, $theme_version );
}
// Get mobile menu icon style.
$mobileMenu = get_theme_mod( 'ocean_mobile_menu_open_hamburger', 'default' );
// Enqueue mobile menu icon style.
if ( ! empty( $mobileMenu ) && 'default' !== $mobileMenu ) {
wp_enqueue_style( 'oceanwp-hamburgers' );
wp_enqueue_style( 'oceanwp-' . $mobileMenu . '' );
}
// If Vertical header style.
if ( 'vertical' === oceanwp_header_style() ) {
wp_enqueue_style( 'oceanwp-hamburgers' );
wp_enqueue_style( 'oceanwp-spin' );
}
}
/**
* Returns all js needed for the front-end
*
* #since 1.0.0
*/
public static function theme_js() {
// Get js directory uri.
$dir = OCEANWP_JS_DIR_URI;
// Get current theme version.
$theme_version = OCEANWP_THEME_VERSION;
// Get localized array.
$localize_array = self::localize_array();
// Comment reply.
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
// Add images loaded.
wp_enqueue_script( 'imagesloaded' );
// Register nicescroll script to use it in some extensions.
wp_register_script( 'nicescroll', $dir . 'third/nicescroll.min.js', array( 'jquery' ), $theme_version, true );
// Enqueue nicescroll script if vertical header style.
if ( 'vertical' === oceanwp_header_style() ) {
wp_enqueue_script( 'nicescroll' );
}
// Register Infinite Scroll script.
wp_register_script( 'infinitescroll', $dir . 'third/infinitescroll.min.js', array( 'jquery' ), $theme_version, true );
// WooCommerce scripts.
if ( OCEANWP_WOOCOMMERCE_ACTIVE
&& 'yes' !== get_theme_mod( 'ocean_woo_remove_custom_features', 'no' ) ) {
wp_enqueue_script( 'oceanwp-woocommerce', $dir . 'third/woo/woo-scripts.min.js', array( 'jquery' ), $theme_version, true );
}
// Load the lightbox scripts.
wp_enqueue_script( 'magnific-popup', $dir . 'third/magnific-popup.min.js', array( 'jquery' ), $theme_version, true );
wp_enqueue_script( 'oceanwp-lightbox', $dir . 'third/lightbox.min.js', array( 'jquery' ), $theme_version, true );
// Load minified js.
wp_enqueue_script( 'oceanwp-main', $dir . 'main.min.js', array( 'jquery' ), $theme_version, true );
// Localize array.
wp_localize_script( 'oceanwp-main', 'oceanwpLocalize', $localize_array );
}
It's hard to say how to dequeue the scripts w/o having a look at the theme source code. Anyways usually you just need to wait until the theme has done it's job, hook into wp and them remove the styles searching for their handles name. Something like this:
add_action('after_setup_theme','alter_styles');
function alter_styles(){
wp_dequeue_style();
wp_dequeue_script();
}
Instead, speaking of your code, first question is: are you sure you load that code at the right time, in the right place or does it get executed at all?
You can do something like:
add_action('template_redirect','my_template_redirect');
function my_template_redirect(){
if (is_page('your_page')){
// Load class / do stuff with scripts/styles
}
}
to be sure and execute the code just for that particular page
If you're using the same css class names, in your css file just add !important before the semi-colon to the attributes you want to force.
There are a number of ways you can get your stylesheets to load after other stylesheets are loaded. You have already tried a few ways, but the parent theme is a very high priority of 9999 so you need to use an even higher one or it won't work.
1. Priority
You are using priority 9999 in your add_action, but if you look at the parent theme, it uses:
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'custom_style_css' ), 9999 );
The priority for your code isn't actually higher than the parent theme, so you need to go higher again, e.g.
add_action('wp_enqueue_scripts', array($this, 'cmmc_styles'), 10000);
2. Dequeuing (Note, you need to match the values used when it was enqueued)
You said dequeuing didn't work for you, but note that when you dequeue a style the priority determines when it runs - just like when you are enqueuing - so you need to use a higher priority than what was used when it was enqueued. It also must use the same hook (or a later one).
As we saw above, you need to do this with a priority higher than the 9999 they were enqueued with, e.g.
function dequeue_oceanwp_styles() {
wp_dequeue_style('oceanwp-style');
wp_deregister_style('oceanwp-style');
}
/* Now call this function with a higher priority than 9999 */
add_action( 'wp_enqueue_scripts', 'dequeue_oceanwp_styles', 10000);
3. Dependencies
If that doesn't work you can set up dependencies between the styles to force the order.
When you use either wp_register_style or wp_enqueue_style, you can specify dependencies for the stylesheet you are registering/enqueuing - i.e. the other stylesheets needed by your stylesheet. This means that the stylesheet you are registering won't get loaded until after the ones it depends on.
To do this, you pass an array of the handles for the stylesheets that must be loaded first, e.g.
// create an array with the handles of the stylesheets you want to load before yours
$dependencies = array('oceanwp-style', 'oceanwp-hamburgers', /* etc. */ );
/* Noew pass this in as the dependencies for your stylesheets */
wp_register_style('bootstrap_css',
'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css',
$dependencies, /* array of dependencies */
NULL, 'all' );
wp_enqueue_style('bootstrap_css');
/* Add bootstrap to the dependencies, if your custom_styles needs it */
$dependencies[] = 'bootstrap_css';
wp_enqueue_style('custom_styles',
plugins_url('/assets/css/styles.css', __FILE__),
$dependencies, /* array of dependencies */
);

Use latest Boostrap deliverd via MAXCDN via Wordpress

I am creating my first wordpress theme from a static site I have built which runs on Boostrap delivered by CDN.
Please no suggestions to download boostrap for this project it needs to be delivered via the CDN.
I would like to load boostrap via the CDN using my functions.php file but instead of loading it just displays the text at the top of the loaded page (there is nothing obvious in the inspector pannel and no error message it just appears to dispaly the infomration from functions.php as text).
I have included <?php wp_head(); ?> in header.php
All code from functions.php:
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_script( 'gajax-js', '://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, NULL, 'all' );
wp_register_style( 'fontawsome-css', '://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_script( 'gajax-js' );
wp_enqueue_style( 'bootstrap-css' );
wp_enqueue_style( 'fontawsome-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );
If you want everything from the CDN, you'll have to get rid of the default jQuery expect on the backend or loginscreen.
After that you just add the CDN without ":"
add_action( 'wp_enqueue_scripts', 'register_jquery' );
function register_jquery() {
if (!is_admin() && $GLOBALS['pagenow'] != 'wp-login.php') {
wp_deregister_script('jquery');
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', false, '1.11.2');
wp_register_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'));
wp_register_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_register_style( 'fontawsome-css', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-js');
wp_enqueue_style('bootstrap-css');
wp_enqueue_style('fontawsome-css');
}
}

How to properly enque css in to wordpress

I am trying to en-queue css in WordPress.
Here is my code:
function adding_styles()
{
wp_register_script( 'jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
// Register the style like this for a plugin:
wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'jquery-ui-css' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'adding_styles' );
However, jquery-ui.css doesn't load. Can anybody guess the error here??
I believe you need to add path to the CSS file -
wp_enqueue_style( 'jquery-ui-css',get_stylesheet_uri() );
EDIT -
It will clearly works with the URL -
wp_enqueue_style( 'jquery-ui-css', http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css );
Reference - wp_enqueue_style
Look for$src parameter
Try this:
You can add javascript & css in wordpress like this
function load_custom_wp_admin_js() {
wp_enqueue_script('custom_wp_admin_js', plugins_url() . '/dynamic-headers/dynamic-header.js');
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_js');
Add this code in function.php file.
-
Thanks

Categories