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.
Related
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.
I created a child theme of the Wordpress rowling theme.
My style.css contains this:
/*
Theme Name: MF2017
Theme URI:
Description: rowling Child Theme
Author: Kathrin Herwig
Author URI: https://schriftbild.net
Template: rowling
Version: 1.0.0
*/
and the functions.php this:
<?php
/**
* Enqueue scripts and styles.
*/
function namescript_scripts() {
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')
);
}
add_action( 'wp_enqueue_scripts', 'namescript_scripts' );
?>
The child theme's css is loaded on my test-webspace , the class .grau: grey frame around the images is coming from the child theme's css).
But not on the real website. (.grau is not loaded)
I tried everything, but cannot make it work.
It seems it has to do with access rights / file permissions: When I use the browser tools / styles and click on the child theme style.css, or when I click on the link to the CSS file in the source code, I get to see this:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don't have permission to access /wp-content/themes/MF2017/style.css
on this server.</p>
</body></html>
So the browser is not allowed to load the styesheet. Check the access rights / file permissions of the file and its folder on that server and set it to public.
May be you mess with Theme Name. Child theme name should be "Theme Name child", like "Rowling Child" Follow this code below,
/*
Theme Name: Rowling Child
Theme URI: http://example.com/rowling-child/
Description: Rowling Child Theme
Author: Kathrin Herwig
Author URI: https://schriftbild.net
Template: rowling
Version: 1.0.0
Text Domain: rowling-child
*/
for more details check this link https://codex.wordpress.org/Child_Themes
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
I want to create a website in wordpress, for this I take a theme and create a child theme.
I copy in the folder of the child a style.css and header.php, because I want to modify the header too. I modify the file of the child.
In my style.css I add the line Template: with the name of the father theme
/*
Theme Name: Example
Theme URI: http://www.woothemes.com/
Version: 1.2.15
Description: Designed by WooThemes.
Author: WooThemes
Author URI: http://www.woothemes.com
Tags: woothemes
Template: mystile
Copyright: (c) 2009-2011 WooThemes.
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
I am using this line in the header.php
<?php $logo = esc_url( get_template_directory_uri() . 'images/logo.png' ); ?>
of my child theme to take a images but this line return the url of the father theme no his child!
I take this.
http://localhost/.../wp-content/themes/mystile/images/...
I I want this
http://localhost/.../wp-content/themes/example/images...
any idea
You need get_stylesheet_directory_uri, this function checks first in the child theme directory and then in the parent's. The one you're using only checks in the parent directory.
Bottom line: if a function doesn't behave as you expect, check the Codex. Much probably you'll find out why over there.
Add to functions.php:
// create a URL to the child theme
function get_template_directory_child() {
$directory_template = get_template_directory_uri();
$directory_child = str_replace('storefront', '', $directory_template) . 'child-storefront';
return $directory_child;
}
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