Skip to main content

Basic

  • While Loop
  • index.php
  • single.php
  • page.php
  • get_header()
  • get_footer()
  • wp_head()
  • wp_footer()
  • functions.php
  • get_theme_file_uri()

While Loop​

  • Wordpress uses while loop to loop through ALL POSTS
<?while(have_posts()){
	the_post();?>
	<h2><a href="<?the_permalink();?>"><?the_title();?></a></h2>
	<p><?the_content();?></p>
<?}?>

index.php​

  • Wordpress will start website with this file

single.php​

  • Wordpress will look for this file if it wants to render a single POST
<?while(have_posts()){
	the_post();?>
	<h2><?the_title();?></h2>
	<p><?the_content();?></p>
<?}?>

page.php​

  • Wordpress will look for this file if it wants to render a single PAGE
<?while(have_posts()){
	the_post();?>
	<h2><?the_title();?></h2>
	<p><?the_content();?></p>
<?}?>

get_header()​

  • Wordpress will look for header.php file and include it in our file
<?get_header();?>
  • Wordpress will look for footer.php file and include it in our file
<?get_footer();?>
  • in the header.php file, we call wp_head() before ending the header section
  • Wordpress will then look inside function.php to load all necessary header files
<html><thead><?wp_head();?></thead>
  • in the footer.php file, we call wp_footer() before ending the body section
  • Wordpress will then look inside function.php to load all necessary footer files
<tbody><?wp_footer();?></tbody></html>

functions.php​

  • Editing the functions.php file using custom codes allows you to add post types, taxonomies, shortcodes, and more to improve your website.
  • wp_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles.
<?
function mystyles(){
	wp_enqueue_style('style1',get_stylesheet_uri());																//load css file from the current directory
	wp_enqueue_style('BootstrapCSS','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');		//load css file from a remote url
	wp_enqueue_style('BootstrapIcon','https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css');//load css file from a remote url
	wp_enqueue_style('FontAwesome','https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');	//load css file from a remote url
	wp_enqueue_style('style5',get_theme_file_uri('/css/style.css'));												//load css file from the css folder
}

function myscripts(){
	wp_enqueue_script('BootstrapBundle','https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js');//load script file from a remote url
	wp_enqueue_script('script1',get_theme_file_uri('/script/index.js'));												//load script file from the script folder
}

add_action('wp_enqueue_scripts','mystyles');	//when Wordpress renders each page, run the function
add_action('wp_enqueue_scripts','myscripts');	//when Wordpress renders each page, run the function
																			
?>

get_theme_file_uri()​

  • returns the current theme's url
<image source="<?echo get_theme_file_uri('/images/test.png');?>">
<image source="<?echo get_theme_file_uri();?>/images/background.jpg">