How to register and display a custom navigation in WordPress?

WordPress navigation

Adding custom navigation to your own WordPress theme is simple. You do not need any advance skill to do it yourself.

The only pre-requisite to accomplish this is to know where your functions.php is located.

The functions.php is located in your themes folder inside your WordPress project. That is in wp-content/themes/THEMENAME/functions.php.

Step 1: Add function THEMENAME_custom_new_menu() in your functions.php

function THEMENAME_custom_new_menu() {
     register_nav_menu('primary-menu',__( 'Primary Menu' ));
add_action( 'init', 'THEMENAME_custom_new_menu' );

Note: THEMENAME is user-defined. You may change this anytime.

Step 2: Print your menu anywhere in your theme file (e.g. in your index.php or page.php

<?php wp_nav_menu( array(
     'theme_location' => 'my-custom-menu',
     'container_class' => 'custom-menu-class'
) );

How to dynamically print post and page content to the WordPress Theme?

In your page.php, add the following code to dynamically fetch data (in loop) from the WordPress database.

if ( have_posts() ):
while( have_posts() ): the_post();
<?php the_title();?>
<?php the_content();?>

<?php endwhile;

How to add and define a widget area in WordPress?

How to add and define a widget area in WordPress?

In your functions.php, simply add the following code:

function THEMENAME_widgets_init() {      
register_sidebar( array(           
    'name' => __( 'My Widget Area', 'THEMENAME' ),           
    'id' => 'sidebar-1',           
    'description' => __( 'Add widgets here to appear in your sidebar.', 'THEMENAME' ),           
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',           
    'after_widget' => '</aside>',           
    'before_title' => '<h2 class="widget-title">',           
    'after_title' => '</h2>',      
) );
add_action( 'widgets_init', 'THEMENAME_widgets_init' );

1. THEMENAME is user-defined, you may change this to your actual theme folder name.
2. You need to add a separate code in your HTML structure (e.g. page.php file) to call out the defined widget area.

To print your widget area to your theme file, add the following code:

<?php dynamic_sidebar( 'sidebar-1' ); ?>

Note: sidebar-1 is the class name in the functions.php definition.

How to add a CSS in WordPress?

How to add a CSS in WordPress?

Here are three methods on how you can add a CSS in WordPress.

First option: The standard and static way of adding a link between your stylesheet and html file.

Add the following to your HTML code.

Inside the <head> of your HTML.

<link rel="stylesheet" type="text/css" href="css/style.css" />


1. css/style.css is only an example directory and file. It may be different on your case, it is dependent on your actual stylesheet directory and file name.
2. For JS, the code should be <script src=”js/code.js”></script>. Similar with note #1, js/code.js is only an example directory and file.

Second option: Add an @import in your CSS file. Example In your CSS file, add the code above. @import ‘css/bootstrap.min.css’;

Third option: Create a functions.php in your selected WordPress theme folder with the following script.


function THEMENAME_script_enqueue() {
     wp_enqueue_style('stylename', get_template_directory_uri() . '/css/style.css');
     wp_enqueue_script('jsname', get_template_directory_uri() . '/js/code.js');
add_action( 'wp_enqueue_scripts', 'THEMENAME_script_enqueue');

1. THEMENAME should be replaced with the actual theme folder name.
2. wp_enqueue_script is an additional code where in you add javascript files within your WordPress project. It is not mandatory.
3. You need to add wp_head() in the <head> section of your HTML and add wp_footer() before the end of your tag to make sure that the scripts are added to your HTML structure.