I am creating a theme with bootstrap for my WordPress site. I used codestar framework to make an admin panel. I want to use bootstrap icons instead of fontawesome icons used in Codestar framework. On the document page there is an explanation:
As you know, the Icon field works only in backend and you should to
include the icon CSS file in front-end by yourself. For eg. take a
look below enqueue styles example or use your own enqueue styles
method.
Here are the codes I need to change
if( ! function_exists( 'your_prefix_enqueue_fa5' ) ) {
function your_prefix_enqueue_fa5() {
wp_enqueue_style( 'fa5', 'https://use.fontawesome.com/releases/v5.13.0/css/all.css', array(), '5.13.0', 'all' );
wp_enqueue_style( 'fa5-v4-shims', 'https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css', array(), '5.13.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'your_prefix_enqueue_fa5' );
}
If still you want to use Font Awesome 4 only add this filter anywhere.
add_filter( 'csf_fa4', '__return_true' );
Bootstrap icon cdn =>
https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css
The problem is: How can I import the bootstrap icons into the code given above? Thank you in advance for your help.
I used translation for the question. If I'm not successful source:
http://codestarframework.com/documentation/#/fields?id=icon
Related
I'd like to keep the Guten styles, what do I do to only remove classic editor tinymce styles?
Using function
wp_deregister_style('wp-reset-editor-styles');
to disable default WP css on TinyMCE to style it with a skin, but it's also destroying Guten builder.
To remove your editor style, simply find where it's enqueued in your theme (probably using add_editor_style) and then you can add it back in for the block editor, using the action below.
add_action( 'enqueue_block_editor_assets', 'my_enqueue_block_editor_assets', 102);
function my_enqueue_block_editor_assets () {
wp_register_style( 'wp-reset-editor-styles', get_stylesheet_directory_uri() . '/stylesheets/my-custom-stylesheet.css', false, '1.0', 'all' );
}
I have added this line on my plugin
wp_enqueue_style( 'dazzling-bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
and it seems that the whole admin backend was affected of that bootstrap. Any ideas on how to be only on that plugin?
That's because you're not specifying anywhere that the file should be included only for your plugin page, and not for the whole admin backend. Try to add a conditional check and then enqueue the stylesheet.
global $post;
if ( 'enter_plugin_page_slug_here' == $post->name ) {
// enqueue stylesheet here
}
I am developing a WordPress theme with Zurb Foundation 5 framework and ReduxFramework as Theme Options panel. So, there is various way that i can implement Colour Schemes for WordPress theme.
Using Different Style Sheets with different colour Schemes.
Using css class and id
+many more way........
But, I don't want to do this way. ReduxFramework can dynamically change css files and write class or id. And I want to do this way. So i can modify Foundation 5 css style sheet class and id from ReduxFramework Options panel dynamically. And After changing, it's must change Theme colour schemes.
Foundation 5 comes with 6 main colour options. I want to change those from ReduxFramework options panel.
Primary Color
Secondary Color
Alert Color
Success Color
Body Font Color
Header Font Color
Also is there any way that i can modify or change every options that comes with Foundation 5 CSS framework from Redux Framework.
Please go to this image link. {Open this image in a new tab for bigger view}
http://i.stack.imgur.com/YI0aD.png
Now question is, How can i do those things ?
I know short of PHP, JS, HTML, CSS, MYSQL etc. If you describe everything in your answer, it's will be more helpful for me.
This Question is RE-POSTED from Unlimited Colour Schemes in wp theme for Foundation 5 - WordPress Development Stack Exchange: . One reputed user suggested me to ask this question here!
The answer given by #Dovy is right in the basics. As far as i know there is no Less version of foundation. So you will need Foundation's Sass (SCSS) files and a SASS (php) compiler.
It seems Redux has a Sass compiler built in too: Redux and Sass
Install Foundation code, for instance by running bower install foundation in your WordPress folder.
Install a php Sass compiler, see: http://leafo.net/scssphp/
Now in your Redux config file add a hook on save:
add_action('redux/options/' . $opt_name . '/saved', "compile_sass" );
Also see: https://github.com/reduxframework/redux-framework/issues/533
And finally add the compile_sass function to the config file (you can use the compile action as an example, see: http://docs.reduxframework.com/core/advanced/integrating-a-compiler/):
function compile_sass($values) {
global $wp_filesystem;
$filename = dirname(__FILE__) . '/style.css';
if( empty( $wp_filesystem ) ) {
require_once( ABSPATH .'/wp-admin/includes/file.php' );
WP_Filesystem();
}
if( $wp_filesystem ) {
require "scssphp/scss.inc.php";
$scss = new scssc();
$scss->setImportPaths("bower_components/foundation/scss/");
// will search for `assets/stylesheets/mixins.scss'
$css = $scss->compile('$primary-color: '.$values['primary-color'].';
#import "foundation.scss"');
$wp_filesystem->put_contents(
$filename,
$css,
FS_CHMOD_FILE // predefined mode settings for WP files
);
}
}
Well, actually this is quite easy. Foundation uses LESS or SCSS to compile that. They use variables that they pass into those compilers. So the easiest way to do this would be to have Redux use a compiler hook on those color fields, re-output the variables file, and re-run the compiler on the LESS/SCSS. Cake. :)
I happened to get it working gathering info from the various comments but code reflecting newer versions of redux and foundation. Sharing code hoping someone finds this useful
/* sample redux fields = array(
array(
'id' => 'theme-primary-color',
'type' => 'color',
'title' => __( 'Add Primary Color', 'theme-redux' ),
'subtitle' => __( 'Add the theme primary color', 'theme-redux' ),
'default' => '#FFFFFF',
'validate' => 'color',
'compiler' => 'true',
))
*/
add_filter('redux/options/' . $opt_name . '/compiler', 'compiler_action', 10,3);
function compiler_action( $options, $css, $changed_values ) {
global $wp_filesystem, $kavabase_options;
$filename = get_template_directory() . '/assets/stylesheets/theme-style.css';
if( empty( $wp_filesystem ) ) {
require_once( ABSPATH .'/wp-admin/includes/file.php' );
WP_Filesystem();
}
if( $wp_filesystem ) {
require_once ( dirname(__FILE__ ) ."/plugins/scssphp/scss.inc.php" );
//use Leafo\ScssPhp\Compiler; at the beginning of the file
$scss = new Compiler();
$scss->setImportPaths( get_template_directory(). "/inc/foundation-sites/" );
//$scss->setFormatter( "Leafo\ScssPhp\Formatter\Compressed" );
$css = $scss->compile('#import "foundationdependencies.scss"; $theme-primary-color: '.$options['theme-primary-color'].';
#import "foundationsettings.scss";
#import "foundationutil.scss";#import "foundation.scss"');
//var_dump( $scss->getParsedFiles() );
$wp_filesystem->put_contents(
$filename,
$css,
FS_CHMOD_FILE // predefined mode settings for WP files
);
}
}
I am building a full design into WordPress for the first time and I am trying to load in stylesheets and script files but all I seem to be getting is the text output of the location.
What I have is below..
wp_enqueue_style('reset', bloginfo('template_url') . '/reset.css');
wp_enqueue_style('style', bloginfo('stylesheet_url'), array('reset'));
wp_enqueue_style('rhino', bloginfo('template_url') . '/rhinoslider-1.05.css', array('reset','style'));
Do I need to put this inside the link tags or something? I thought it would do it all itself; as what's the point loading it that way if it doesn't do it itself? I know it makes sure the same file isn't included twice or something, but if you have to include the link tags yourself and then WP decides not to include the file then you are left with blank link tags!?
Lastly, should I set these up beforehand so I can just call them via their handles? If so, where? functions.php?
Edit: I also tried putting the below in my themes functions.php file but got the same results.
add_action( 'after_setup_theme', 'mmw_new_theme_setup' );
function mmw_new_theme_setup() {
/* Add theme support for post formats. */
add_theme_support( 'post-formats' );
/* Add theme support for post thumbnails. */
add_theme_support( 'post-thumbnails' );
/* Add theme support for automatic feed links. */
add_theme_support( 'automatic-feed-links' );
/* Add theme support for menus. */
add_theme_support( 'menus' );
/* Load style files on the 'wp_enqueue_scripts' action hook. */
add_action( 'wp_enqueue_scripts', 'mmw_new_load_styles' );
}
function mmw_new_load_styles() {
$foo = bloginfo('template_url') . '/reset.css';
$bar = bloginfo('template_url') . '/rhinoslider-1.05.css';
wp_enqueue_style('reset', $foo);
wp_enqueue_style('style', bloginfo('stylesheet_url'), array('reset'));
wp_enqueue_style('rhino', $bar, array('reset','style'));
}
When storing values in a variable via PHP use:
get_bloginfo()
So your new function would now look like:
function mmw_new_load_styles() {
$foo = get_bloginfo('template_url') . '/reset.css';
$bar = get_bloginfo('template_url') . '/rhinoslider-1.05.css';
wp_enqueue_style('reset', $foo);
wp_enqueue_style('style', bloginfo('stylesheet_url'), array('reset'));
wp_enqueue_style('rhino', $bar, array('reset','style'));
}
And be more semantic! It makes code for beginners easier to look at. ($foo could be $resetCssUrl)
I was having similar issues.
The register / enqueue scripts are so that you can globally assign your functions to load in the correct order. You can call them from the page that your working in but it is considered better practice do it this way.
My template has a functions.php but its nealry empty! It sepreates the scripts into 7 subchapters, theme-options, theme-functions, themes-js, etc. Here is my themes.js.php file but this could quite easily placed in your file inside your wp-content/themes/functions.php My themes-js.php file
I'm developing a WordPress widget following Dave Clements tutorial. It works well. Now I want to add some styles to it. I want the styles to be in an extra css file which will be loaded during runtime. I'm calling this function
function myprefix_add_my_stylesheet() {
wp_register_style( 'myprefix-style', plugins_url('mystyle.css', __FILE__) );
wp_enqueue_style( 'myprefix-style' );
}
right before "// Widget output //" using this statement.
add_action( 'wp_enqueue_scripts', 'myprefix_add_my_stylesheet' );
But nothing seems to happen. What am I doing wrong?
Your wp_enqueue_scripts action do not work because you call it too late, in widget() function (widget output). It's too late because Wordpress already print/send head of page.
For example, you can add this action on widget construct function.