As you know we created all the standard files which we need in our custom wordpress theme. Now it’s time to do some dynamic thing.
Header and Footer
First, add a header and footer to our theme, here we have pre-build functions for header and footer which includes every kind of css and js file linked by functions.php and plugins dynamically. We have wp_head to grab css links in header and wp_footer to grab js links in footer. Just copy below code and paste it into your header.php and footer.php files.
Header.php
wp_head allows wordpress and third-party plugin style sheets to include in header.
body_class is a pre-build helper function which grab some dynamic class inside body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
Footer.php
wp_footer allows wordpress and third-party plugin scripts to include in footer.
<?php wp_footer(); ?> </body> </html>
Enqueuing CSS and JS
WordPress gives us to link our style sheet and scripts by using enqueuing functions and wp_enqueue_scripts hook locations. We create below a custom function for enqueue css and js.
get_stylesheet_uri() is a helper function that includes the style.css file which we created in standard files. but if you can add bootstrap and other custom files use get_template_directory_uri() function just like below code.
function medicure_links(){
// adding Css files
wp_enqueue_style('cs_bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css');
wp_enqueue_style('cs_css', get_stylesheet_directory_uri().'/css/app.css');
// adding Js files
wp_enqueue_script( 'js_bootstrap','https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js',array(), false,true);
wp_enqueue_script( 'js_app', get_template_directory_uri() . '/js/app.js', array(), false,true );
}
add_action('wp_enqueue_scripts','medicure_links');
Note: keep other parameters same which i use, we will discuss it our next lectures.
I linked custom css and custom js file link by creating folder files myslef, and now our theme directory looks like this.
#BeingCodeStuffer
