I have this styles created in dynamic page with pure html, css, some js libraries. I want to add it to wordpress theme, If there any plugins can create those styles, or how can i add the code by myself ?
Style1
Style2
To add your own styles:
1) Create a child-theme
2) Add your styles to the child theme
3) Setup the child theme lo load the parent's styles.
4) If you use different css files for the added styles, load them after the child-theme's style.css is loaded.
5) For the js files you will do the same as for css files.
To load child-themes you will need make changes to the functions.php of the child-them in order to hook into wp_enqueue_scripts action.
add_action( 'wp_enqueue_scripts', 'load_aditional_styles' );
and use wp_enqueue_style();
function oad_aditional_styles(){
wp_enqueue_style( 'my_style_1', get_stylesheet_directory_uri() . '/Style1.css', array(), all );
wp_enqueue_style( 'my_style_2', get_stylesheet_directory_uri() . '/Style2.css', array(), all );
wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . 'MuJsFile.js', array(),null, true );
}
(This assumes Style1.css and Style2.css are in the root of the child-theme, otherwise you need to add the corresponding folders to the file name)
For js files, the empty array indicates no dependancies, but if you have dependancies like jQuery, the jquery handle has to be added there.
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 want to work on a website powered by wordpress. As suggested by Wordpress community, I should be creating a child theme and need to write code on it. So, there would be two css files, one css file would be of parent theme and other would be of child theme. So, when an end-user will request, will there be two css files requests ?
Suppose your theme name is Theme-x
create a folder with name theme-x-child
inside the folder create Three files
1. functions.php
<?php
//
// Recommended way to include parent theme styles.
// (Please see http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme)
//
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
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')
);
}
//
// Your code goes below
//
2. rtl.php
/*
Theme Name: Theme-x Child
Template:
Right to Left text support.
*/
#import url("../Theme-x/rtl.css");
3.style
/*
Theme Name: Theme-x Child
Description: wordpress
Author: admin
Template: Theme-x Child
(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/
That's it if you want you can add the screenshot.png too. it will get the styles from your parent theme.
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
}
How can I add title attribute for my own custom stylesheet in wordpress within functions.php file? I find something like that
`
global $wp_styles;
$wp_styles->add('example-alt', '/themes/example/example-alt.css');
$wp_styles->add_data('example-alt', 'title', 'Example Alternate Stylesheet');
$wp_styles->add_data('example-alt', 'alt', TRUE);
$wp_styles->enqueue(array('example-alt'));
`
but I don't know how can i use it within functions.php file or anywhere else?
I'm not sure if I have understood your question. You want to add a CSS Stylesheet to your blog or an attribute to the title?
If you want to add a CSS Stylesheet within functions.php, you have to enqueue it like this:
If your CSS stylesheet is named "my-style.css", place it on a folderl called "css" withing the folder of your theme, and then write that on functions.php:
function your_theme_name_scripts() {
// For Styles:
wp_enqueue_style( 'my-style', get_template_directory_uri(), '/css/my-style.css' );
// For Scripts:
wp_enqueue_script( 'my-script', get_template_directory_uri(), '/js/my-script.js' );
}
add_action( 'wp_enqueue_scripts', 'your_theme_name_scripts' );
Your find more info about enqueueing styles here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
If you want to add any attribute to the title, you have two options: creating a filter on functions.php, or directly modifying the wp_title() function on header.php. The second options is the best one.
You find more info about the title here: http://codex.wordpress.org/Function_Reference/wp_title
in wordpress how can I put style.css lastest file of all stylesheet file?
I tried
function stylecssAlwaysLast() {
wp_register_style( 'mystyle', get_stylesheet_directory_uri() .'/style.css');
wp_enqueue_style( 'mystyle' );
}
add_action('wp_enqueue_scripts','stylecssAlwaysLast',1000);
but add file last but dont remove the style.css add by default wordpress code. In other words: at the last i've two files style.css :-(
UPDATE
I get it! :-)
Goals:
remove default theme style.css;
my stylesheet must to be the latest item;
if exist the compressed version use it in place of default versione;
...and the answers is...:
function styleCompressedLatest() {
// delete style.css
wp_dequeue_style('wp-bootstrap');
wp_deregister_style('wp-bootstrap');
// text if exist compressed version
if(file_exists(get_stylesheet_directory().'/style_compressed.css')) {
$style = get_stylesheet_directory_uri() .'/style_compressed.css';
} else {
$style = get_stylesheet_directory_uri() .'/style.css';
}
// add my style.css
wp_enqueue_style( 'mystyle', $style);
}
add_action('wp_enqueue_scripts','styleCompressedLatest',1000);
Somebody knows a best way?
You are on the right track, just don't call your stylesheet style.css and both will be included.
Also, you don't need to register and enqueue a style if you are only using it once, just use wp_enqueue_style() as below.
function stylecssAlwaysLast() {
wp_enqueue_style( 'mystyle', get_stylesheet_directory_uri() .'/mystyle.css');
}
add_action('wp_enqueue_scripts','stylecssAlwaysLast',1000);