WordPress stylesheet url function

Developer Resources

Retrieves stylesheet URI for the active theme.

Contents

Description

The stylesheet file name is ‘style.css’ which is appended to the stylesheet directory URI path.
See get_stylesheet_directory_uri() .

Return

string URI to active theme’s stylesheet.

More Information

Returns URL of current theme stylesheet.

Source

Hooks

Filters the URI of the active theme stylesheet.

Related

Uses

Retrieves stylesheet directory URI for the active theme.

Calls the callback functions that have been added to a filter hook.

Used By

Uses	Description
get_stylesheet_directory_uri() wp-includes/theme.php

Used By

Retrieves information about the current site.

Changelog

Used By	Description
get_bloginfo() wp-includes/general-template.php

Changelog

Version	Description
1.5.0	Introduced.

User Contributed Notes

To output the URL

Example output

When using a parent theme:

https://example.com/wp-content/themes/parent-theme/style.css

When using a child theme:

https://example.com/wp-content/themes/child-theme/style.css

You must log in before being able to contribute a note or feedback.

Источник

Developer Resources

Retrieves stylesheet directory URI for the active theme.

Contents

Return

string URI to active theme’s stylesheet directory.

More Information

• The returned URI does not contain a trailing slash.
• This function returns a properly-formed URI; in other words, it will be a web-address (starting with http:// or https:// for SSL). As such, it is most appropriately used for links, referencing additional stylesheets, or probably most commonly, images.
• In the event a child theme is being used, this function will return the child’s theme directory URI. Use get_template_directory_uri() to avoid being overridden by a child theme.
• If you want to include a local file in PHP, use get_stylesheet_directory() instead.

Source

Hooks

Filters the stylesheet directory URI.

Related

Uses

Retrieves URI for themes directory.

Retrieves name of the current stylesheet.

Calls the callback functions that have been added to a filter hook.

Used By

Uses	Description
get_theme_root_uri() wp-includes/theme.php

Used By

Retrieves the URL of a file in the theme.

Retrieves any registered editor stylesheet URLs.

Gets the details of default header images if defined.

Display first step of custom header image page.

Reset a header image to the default image for the theme.

Process the default headers

Registers some default controls.

Gets random header image data from registered images in theme.

Gets the header image data.

Retrieves theme modification value for the active theme.

Retrieves stylesheet URI for the active theme.

Retrieves the localized stylesheet URI.

Retrieves information about the current site.

Changelog

Used By	Description
get_theme_file_uri() wp-includes/link-template.php
Custom_Image_Header::get_default_header_images() wp-admin/includes/class-custom-image-header.php
Custom_Image_Header::step_1() wp-admin/includes/class-custom-image-header.php
Custom_Image_Header::reset_header_image() wp-admin/includes/class-custom-image-header.php
Custom_Image_Header::process_default_headers() wp-admin/includes/class-custom-image-header.php
WP_Customize_Manager::register_controls() wp-includes/class-wp-customize-manager.php

Changelog

Version	Description
1.5.0	Introduced.

User Contributed Notes

This function returns the URL to the current child theme if a child theme is used. If you want to return the URL to the root/mother theme, use get_template_directory_uri() instead.

Image (HTML)

Given –
Website URL: https://example.com/
Active theme folder: mytheme

This function returns the following string:

NOTE: without trailing slash (/)

When using inside HTML `src` attribute, you should escape the returned URL when you add some files after the function:

You must log in before being able to contribute a note or feedback.

Источник

Developer Resources

Chapters

Including CSS & JavaScript

Topics

When you’re creating your theme, you may want to create additional stylesheets or JavaScript files. However, remember that a WordPress website will not just have your theme active, it will also be using many different plugins. So that everything works harmoniously, it’s important that theme and plugins load scripts and stylesheets using the standard WordPress method. This will ensure the site remains efficient and that there are no incompatibility issues.

Adding scripts and styles to WordPress is a fairly simple process. Essentially, you will create a function that will enqueue all of your scripts and styles. When enqueuing a script or stylesheet, WordPress creates a handle and path to find your file and any dependencies it may have (like jQuery) and then you will use a hook that will insert your scripts and stylesheets.

Enqueuing Scripts and Styles

The proper way to add scripts and styles to your theme is to enqueue them in the functions.php files. The style.css file is required in all themes, but it may be necessary to add other files to extend the functionality of your theme.

Tip: WordPress includes a number of JavaScript files as part of the software package, including commonly used libraries such as jQuery. Before adding your own JavaScript, check to see if you can make use of an included library.

1. Enqueue the script or style using wp_enqueue_script() or wp_enqueue_style()

Stylesheets

Your CSS stylesheets are used to customize the presentation of your theme. A stylesheet is also the file where information about your theme is stored. For this reason, the style.css file is required in every theme.

Rather then loading the stylesheet in your header.php file, you should load it in using wp_enqueue_style . In order to load your main stylesheet, you can enqueue it in functions.php

To enqueue style.css :

This will look for a stylesheet named “style” and load it.

The basic function for enqueuing a style is:

You can include these parameters:

• $handle is simply the name of the stylesheet.
• $src is where it is located. The rest of the parameters are optional.
• $deps refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
• $ver sets the version number.
• $media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’

So if you wanted to load a stylesheet named “slider.css” in a folder named “CSS” in you theme’s root directory, you would use:

Scripts

Any additional JavaScript files required by a theme should be loaded using wp_enqueue_script . This ensures proper loading and caching, and allows the use conditional tags to target specific pages. These are optional.

wp_enqueue_script uses a similar syntax to wp_enqueue_style .

Enqueue your script:

• $handle is the name for the script.
• $src defines where the script is located.
• $deps is an array that can handle any script that your new script depends on, such as jQuery.
• $ver lets you list a version number.
• $in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather then in the header, so that it does not delay the loading of the DOM tree.

Your enqueue function may look like this:

The Comment Reply Script

WordPress comments have quite a bit of functionality in them right out of the box, including threaded comments and enhanced comment forms. In order for comments to work properly, they require some JavaScript. However, since there are certain options that need to be defined within this JavaScript, the comment-reply script should be added to every classic theme that uses comments.

In block themes, the script is included when you place a comment block. You do not need to add it manually.

The proper way to include comment reply in classic themes is to use conditional tags to check if certain conditions exist, so that the script isn’t being loaded unnecessarily. For instance, you can only load scripts on single post pages using is_singular , and check to make sure that “Enable threaded comments” is selected by the user. So you can set up a function like:

If comments are enabled by the user, and we are on a post page, then the comment reply script will be loaded. Otherwise, it will not.

Combining Enqueue Functions

It is best to combine all enqueued scripts and styles into a single function, and then call them using the wp_enqueue_scripts action. This function and action should be located somewhere below the initial setup (performed above):

Default Scripts Included and Registered by WordPress

By default, WordPress includes many popular scripts commonly used by web developers, as well as the scripts used by WordPress itself. Some of them are listed on this reference page:

Источник

Developer Resources

Displays information about the current site.

Contents

Description

See also

Parameters

More Information

Possible values for $show

• ‘name‘ – Displays the “Site Title” set in Settings > General. This data is retrieved from the “blogname” record in the wp_options table.
• ‘description‘ – Displays the “Tagline” set in Settings > General. This data is retrieved from the “blogdescription” record in the wp_options table.
• ‘wpurl‘ – Displays the “WordPress address (URL)” set in Settings > General. This data is retrieved from the “siteurl” record in the wp_options table. Consider echoing site_url() instead, especially for multi-site configurations using paths instead of subdomains (it will return the root site not the current sub-site).
• ‘url‘ – Displays the “Site address (URL)” set in Settings > General. This data is retrieved from the “home” record in the wp_options table. Consider echoing home_url() instead.
• ‘admin_email‘ – Displays the “E-mail address” set in Settings > General. This data is retrieved from the “admin_email” record in the wp_options table.
• ‘charset‘ – Displays the “Encoding for pages and feeds” set in Settings > Reading. This data is retrieved from the “blog_charset” record in the wp_options table. Note: this parameter always echoes “UTF-8”, which is the default encoding of WordPress.
• ‘version‘ – Displays the WordPress Version you use. This data is retrieved from the $wp_version variable set in wp-includes/version.php .
• ‘html_type‘ – Displays the Content-Type of WordPress HTML pages (default: “text/html”). This data is retrieved from the “html_type” record in the wp_options table. Themes and plugins can override the default value using the pre_option_html_type filter.
• ‘text_direction‘ – Displays the Text Direction of WordPress HTML pages. Consider using is_rtl() instead.
• ‘language‘ – Displays the language of WordPress.
• ‘stylesheet_url‘ – Displays the primary CSS (usually style.css) file URL of the active theme. Consider echoing get_stylesheet_uri() instead.
• ‘stylesheet_directory‘ – Displays the stylesheet directory URL of the active theme. (Was a local path in earlier WordPress versions.) Consider echoing get_stylesheet_directory_uri() instead.
• ‘template_url‘ / ‘template_directory‘ – URL of the active theme’s directory. Within child themes, both get_bloginfo(‘template_url’) and get_template() will return the parent theme directory. Consider echoing get_template_directory_uri() instead (for the parent template directory) or get_stylesheet_directory_uri() (for the child template directory).
• ‘pingback_url‘ – Displays the Pingback XML-RPC file URL (xmlrpc.php).
• ‘atom_url‘ – Displays the Atom feed URL (/feed/atom).
• ‘rdf_url‘ – Displays the RDF/RSS 1.0 feed URL (/feed/rfd).
• ‘rss_url‘ – Displays the RSS 0.92 feed URL (/feed/rss).
• ‘rss2_url‘ – Displays the RSS 2.0 feed URL (/feed).
• ‘comments_atom_url‘ – Displays the comments Atom feed URL (/comments/feed).
• ‘comments_rss2_url‘ – Displays the comments RSS 2.0 feed URL (/comments/feed).
• ‘siteurl‘ – Deprecated since version 2.2. Echo home_url() , or use bloginfo(‘url’).
• ‘home‘ – Deprecated since version 2.2. Echo home_url() , or use bloginfo(‘url’).

Source

Related

Uses

Retrieves information about the current site.

Used By

Uses	Description
get_bloginfo() wp-includes/general-template.php

Used By

Renders a page containing a preview of the requested Legacy Widget block.

Output the login page header.

Prints out the beginning of the admin HTML header.

Generic Iframe header for use with Thickbox.

Outputs the iframe to display the media upload page.

Display first step of custom header image page.

Changelog

Used By	Description
WP_REST_Widget_Types_Controller::render_legacy_widget_preview_iframe() wp-includes/rest-api/endpoints/class-wp-rest-widget-types-controller.php
Custom_Image_Header::step_1() wp-admin/includes/class-custom-image-header.php

Changelog

Version	Description
0.71	Introduced.

User Contributed Notes

If using bloginfo as a variable, for example: $url = bloginfo(‘url’); it will return null. This is because bloginfo() echos the result immediately. So if you want to use any of the bloginfo() parameters as variables use get_bloginfo(). This function returns the result as a string.

Show Blog Title

Display your blog’s title in a tag.

Show Blog Description

Displays the tagline of your blog as set in Settings > General.

Show Blog Title in Link

Displays your blog’s title in a link.

Example output

In this example case, the Site Address (URL) is shown as http://www.example.com/home, and the WordPress address (URL) is displayed as http://www.example.com/home/wp.

Please note that directory URLs are missing trailing slashes.

Practical example that could be used as it is in themes. Hides description if empty.

Show Character Set

Displays the character set your blog is using (e.g. “utf-8”).
NOTE: In version 3.5 and later, default character encoding is set to UTF-8 and is not configurable from the Administration Screen.

show website blog name in header

You must log in before being able to contribute a note or feedback.

Источник