Ordering Wordpress Stylesheets

Ordering Wordpress Stylesheets?

when you enqueue your stylesheets, use a higher priority, e.g.:

add_action( 'wp_enqueue_scripts', array(&$this, 'theme_styles'), 99 );

If some plugins have hooks on 'wp_print_styles', then you have to use it instead, as 'wp_print_styles' will be written after 'wp_enqueue_scripts', iirc.

And as you have complete control over your theme, you also could include your styles directly into header.php, if the hassle with the actions isn't worth time...

Wordpress - How to prioritize some stylesheets when enqueueing them

Well you can set your bulma.css as a dependency on your hw.css.
So first you register your css via wp_register_style and then you use wp_enqueue_style.

Like so:

function hw_resources()
{
 wp_register_style( 'hw-css', get_template_directory_uri() . '/hw.css', array(), '1.0', 'all' );
 wp_register_style( 'bulma-css', get_template_directory_uri() . '/bulma.css', array( 'hw-css' ), '1.0', 'all' );
 wp_enqueue_style('hw-css');
}

add_action('wp_enqueue_scripts', 'hw_resources');

Override !important In WordPress Parent Theme

Use the Body tag in front of it... be more specific:

body .thm-unit-test h3 {
    font-size: 28px !important;
}

Or other parent elements...

Take some time to understand CSS Selector Priority:

Understanding CSS selector priority / specificity

A selector's specificity is calculated as follows:

count 1 if the declaration is from is a 'style' attribute rather than
a rule with a selector, 0 otherwise (= a) (In HTML, values of an
element's "style" attribute are style sheet rules.

These rules have no
selectors, so a=1, b=0, c=0, and d=0.) count the number of ID
attributes in the selector (= b) count the number of other attributes
and pseudo-classes in the selector (= c) count the number of element
names and pseudo-elements in the selector (= d) The specificity is
based only on the form of the selector.

the form "[id=p33]" is counted as an attribute selector (a=0, b=0,
c=1, d=0), even if the id attribute is defined as an "ID" in the
source document's DTD. Concatenating the four numbers a-b-c-d (in a
number system with a large base) gives the specificity.

In particular, a selector of the form "[id=p33]" is counted as an attribute selector
(a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source
document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the > specificity.

https://www.w3.org/TR/CSS2/cascade.html#cascading-order

I'd use an ID in front of it tbf.

How do I include a php page with its own css and javascript on a wordpress page?

If you need or want to use a shortcode, then that means it can be ran on any page or post at any time and so you should always include the necessary JS and CSS. You include JS and CSS in WordPress using a function that contains wp_enqueue_script() calls, and wp_enqueue_style() calls. The function that includes those calls should hook to wp_enqueue_scripts (this link has good examples), and it should be located in the functions.php file of your WP theme or a file that is included within the functions.php file.

Then the shortcode function itself can just be built out as normal, located inside the functions.php file for your theme or a file that the functions.php file includes. If you're not sure how to do that, here's an example below using output buffering.

add_shortcode('shortcode_name_here', 'shortcode_function_name_here');
function shortcode_function_name_here(){

    // Begin output buffering
    ob_start();

    // Build table example, replace with your code beginning here
    // WP_Query, grab up to 100 blog posts, no paging
    $query_args =  array ( 
        'posts_per_page' => 100, 
        'post_type' => 'post', 
        'no_found_rows' => true,
    );

    $wp_query = new WP_Query( $query_args );

    if( $wp_query->have_posts() ) :

        ?>
        <table>
           <tr>
                <th>Titles</th>
            </tr>
            <?php while( $wp_query->have_posts() ) : the_post(); ?>
                <tr>
                    <td><?php the_title(); ?></td>
                </tr>
            <?php endwhile; ?>
        </table>
        <?php

    // Alternative message if there's no posts       
    else:

        ?>
        <h3>Sorry, but we have nothing for you.</h3>
        <?php

    endif;

    // End build table example, end your custom code here
    // End buffering, save, return
    $output = ob_get_clean();
    return $output;
}

Versioning css/javascript in Wordpress

That's not how it works in my experience. Browsers do cache based on GETs. To test this, go to the author's url (http://static.prelovac.com/style.css?1266235697) with firebug enabled. First request should give you "200 OK", now refresh and you get "304 Not Modified".

If you're not convinced, you can always try this method

---

Related Topics