How to Code HTML to WordPress - Part 8 - Ending

The end is here! In part 8 of my screencast series "How to Code HTML to WordPress" I create a widget footer section of the HTML theme.

There's a different way to do everything

The footer of our theme will likely be repeated amongst multiple pages of the site. For the purposes of this screencast, I didn't show how to code and apply our theme to interior pages. If for instance, you were to use this landing page design and build upon it to include a blog and or additional interior pages you could totally do so.

All of this said I coded the footer in such a way to make it "widgetized". Widgets are meant to be used interchangeably. I created a new Sidebar in WordPress and added a custom widget solely for the footer in the design.

I went this route because it is more of a globalized UI rather than using custom fields on a single page for instance. This allows us to make changes once and then those saved changes are reflected on every page.

Creating a new sidebar

Inside the theme's functions.php file you will fine a block of code like below:

function html_to_wp_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'html-to-wp' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'html-to-wp' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'html_to_wp_widgets_init' );

Here I have a function which registers our default sidebar inside our theme. This code comes default in the underscores theme generate I used at the beginning of this series.

To create a new sidebar you can simply copy and page the register_sidebar() block. Inside the new theme this is how my code looks:

function html_to_wp_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'html-to-wp' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'html-to-wp' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
    register_sidebar( array(
        'name'          => esc_html__( 'Footer', 'html-to-wp' ),
        'id'            => 'footer-sidebar',
        'description'   => esc_html__( 'Add footer widgets here.', 'html-to-wp' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'html_to_wp_widgets_init' );

Here I've added a new sidebar with the name Footer and the id of footer-sidebar. You can rename this to whatever you prefer. Since it's for only the footer in the theme I chose these specific naming conventions.

Upon saving you can now navigate to the WordPress dashboard and look inside Appearance / Widgets. You'll notice a new module called "Footer" on the right-hand side of the screen. Here you can add new widgets of any type or variety.

widgets

Now that we have the sidebar all set up you still need to output that data to the theme. To do this I added the following code to my footer-home.php file.

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

Simply put, this generates markup as well as markup for the widgets inside your theme using one line of PHP. It's pretty handy but as you may notice in the video I needed to do a few workarounds to get it to play nice with our HTML theme.

Where to go from here

WordPress can be tricky to master. In my own experience, I needed to watch others, do many tutorials, and most importantly build sites to learn the ins and outs of the CMS.

You will break things and then find ways to fix them by googling it and/or reading the WordPress documentation. This is normal. I remember feeling guilty when I had to search the web for every issue I was having. In reality, I was learning from my peers! Thankfully, we have this available to us.

From here I suggest you attempt building more themes. Whether it's your portfolio or your friends, or even just a basic site for anything really you need to always be practicing. There are a lot of free HTML themes out there you can do similar to what I have here. You can even go one step further and design your own theme from scratch.

Closing Thoughts

This series has been brief but fun. I hope it's helped you understand the power of WordPress and why it's powering nearly 25% of websites today. There are many great things you can build with it. For me, it was a great foundation to learn web development. I'm interested in scaling on to bigger and better things as I progress in my career but I do feel I will always utilize WordPress in some sort of degree. Many people bash it for the flaws but in reality, it's free, it works well, and people understand it over other platforms today.

I hope to contribute more screencasts related to WordPress development in the near future. My long-term goal is to document real-life projects so as clients come and go I plan to show you each step of the way. I hope you'll follow along in the videos to come!

Watch the entire series

Download the source code

How to Code HTML to WordPress - Start
How to Code HTML to WordPress - End