So I made a new website for a club/ organization. My task is to update an old website on WordPress with this new website.

I transferred all my HTML pages and CSS/JS files. However, some of my custom CSS is being overwritten somehow. For example, my button colors are blue on WordPress, yet orange on local machine.

What's going on? I looked through every option and plugin setting and I can't figure it out.

  • More info needed: where do you 'put' your CSS? How do you call/load the CSS? Where is your custom CSS file? – Rick Hellewell Jan 29 '18 at 2:08
  • If it's just some of your css, and you have a class for your buttons .btn, but wordpress has defined in it's css .wordpress .btn that automaticly overwrites your css because it's more specific. If it's like that, you should change your classes and make them unique, or be more verbose with your selectors in your css. Developer Tools can help you determine what exactly is going on. – D. Dan Jan 29 '18 at 7:14

I do assume you have functions.php file in your theme directory after that you can add following code :

/*Section for enqueuing styles and scripts*/
    function keyword_theme_styles_and_scripts(){
        /* Styles Below */
        wp_enqueue_style('bootstrap-min-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

        wp_enqueue_style('video-js-min-css', get_template_directory_uri().'/assets/css/video-js.min.css');

        wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800');

        wp_enqueue_style('font-awesome-min-css', get_template_directory_uri().'/assets/font-awesome/css/font-awesome.min.css');

        wp_enqueue_style('magnific-popup-css', get_template_directory_uri().'/assets/css/magnific-popup.css');

        wp_enqueue_style('animate-min-css', get_template_directory_uri().'/assets/css/animate.min.css');

        wp_enqueue_style('device-mockups-min-css', get_template_directory_uri().'/assets/device-mockups/device-mockups.min.css');

        wp_enqueue_style('main-css', get_template_directory_uri().'/style.css');

        /*  Scripts Below */

        wp_enqueue_script('jquery-min-js', get_template_directory_uri().'/assets/js/jquery.min.js', array(), '', true);

        wp_enqueue_script('video-min-js', get_template_directory_uri().'/assets/js/video.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('bootstrap-min-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), '', true);

        //wp_enqueue_script('bootstrap-min-js', get_template_directory_uri().'assets/bootstrap/js/bootstrap.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('jquery-easing-min-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('scrollreveal-min-js', get_template_directory_uri().'/assets/js/scrollreveal.min.js', array('jquery-min-js'), '',true);

        wp_enqueue_script('jquery-magnific-popup-min-js', get_template_directory_uri().'/assets/js/jquery.magnific-popup.min.js',array('jquery-min-js'), '', true);

        wp_enqueue_script('svg-injector-min-js', get_template_directory_uri().'/assets/js/svg-injector.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('wow-min-js', get_template_directory_uri().'/assets/js/wow.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('index-min-js', get_template_directory_uri().'/assets/js/index.min.js', array('jquery-min-js'), '', true);

    add_action('wp_enqueue_scripts', 'keyword_theme_styles_and_scripts');

Remember to enqueue your custom styles and scripts at the bottom of the queue.

and order of the scripts ans styles matters as well so enqueue in proper order.

I hope it helps.

Good Luck!!!

  • When you load CSS from different sources you can't rely on the order you enqueue them. So, use $deps parameter of the wp_enqueue_style() function to be entirely sure. – Max Yudin Jan 29 '18 at 8:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.