Blog: Developing my new blog in WordPress #8 (More Posts)
And with that, I can now reveal and welcome you to my new blog website.
Hello there! 🙂
I’m very excited to talk about this today. This is without a doubt my boldest iteration yet, and there’s been a few over the years. It introduces a functioning search bar, a filtering page for all my posts, and a new system for code syntax highlighting in my blog posts. So it has a cleaner design and has multiple ways to find posts you might like to read!”
On the homepage, you can immediately see the 6 most recent posts in the Image Carousel, using the capabilities of WordPress and JavaScript.
Since the custom posts of the previous design and the local development I was working on, I didn’t need to perform any database migrations as I previously thought I’d have to do, which made the changeover nice and straightforward.
I was able to upload the theme files to this domain and the styles were picked up immediately. There were just a few last-minute modifications to make.
Problems to solve
- Blog Archive.
- Category Archive Pages.
- Search Result pages.
- Missing elements in Menu areas and WordPress Widgets.
To fix the first problem. I set the page slugs for the following pages
- The Page.php Template – /about
- Author Page – /author-page
- Categories – /category/
- Page – /blogs /about/
- Privacy Policy – /privacy-policy
- Search – /search-page
- Archive Page – /site-archive
I added a new page with a slug of /about, which is okay for me to do because my design requires only one page that is served by page.php.
Right away when I looked at the theme I noticed a few things were missing. The menu areas were not connected properly, which meant the subdomain items were not showing and there were no social media icons.
This design has 2 menu areas and one of them holds the Social icons.
<?php
register_nav_menus( array(
'social-icons' => __( 'Social', 'Social Menu' )
) );Both string arguments make the menu area selectable in the admin area so we can select the menu to edit and give it a menu location.
Then it was just a case of making sure the icons were showing up. Taking my queue from the local development area, I used HTML code like this as the items “Navigation Label”. To make sure the URL wasn’t breaking I simply replaced the localhost domain with the blog subdomain.
<!-- put code like this in the navigatioin label -->
<img class="social-icon" src="https://blog.jonniegrieve.co.uk/wp-content/themes/jgdm_blog_2023/files/images/social/facebook.png" alt="Facebook" title="Facebook" />And that fixed the menu
Fixing the widgets
With the menu areas now working, next it was about making sure the Widget areas were working. Missing the welcome message, the search bar and3 menu areas were not working.
Because I’d copied over the functions.php file with the Widget areas created, This was simply a case of looking at what I’d already done in local development. You find the widget area in the widgets page and find the correct widget to drop it into.
Adding Custom Links widget
Find more blogs – and welcome text needed some work.
Thankfully this was a simple enough fix. Using my local development as a guide…. added two widget areas that were still in place from the functions.php file. For example, the widget for the “other sites” box is as simple as a list widget which you can use to create custom links.
<?php
// Widget Area Subdomain list
register_sidebar( array (
'name' => __( ' Widget Area: - Other Sites'),
'id' => 'widget-area-subdomain',
'description' => __( 'Welcome - Other Sites') ,
'before_widget' => ''
)
);
Code Highlighting
I’m pleased with what I’ve managed to achieve with the code syntax highlighting. One problem that has been dealt with from the last design s that the code text bled out of its container and affected the containing element which broke the design. That is now fixed and what you now see is the code breaks into a new line whenever it needs to.
Once again I’m very pleased with how the new blog is looking. I would appreciate any constructive feedback you have about it though because as with any creative effort, there’s always more that can be done. 🙂
Thanks for reading!