Jonnie Grieve Digital Media: Blog

Home
by on 1st June, 2023 - 12:23pm (0)

Blog: Developing my new blog in WordPress #2 (More Posts)

What I’ve done so far

I ended the last blog with several new templates and template parts to get the theme going. It’s now time to work on getting some links sorted so the theme is navigable between different templates and to some WP queries working on the homepage.

Where I’m starting out, Since I already have the theme support in the code I have access to the WordPress menu system in the admin area.

<?php
    // ADD THEME SUPPORTS
    add_theme_support( "widgets" );
    add_theme_support( "menus" );

I opened up the link for WordPress widgets as well as we’ll need to be working with Widget areas too.

Building Menu Areas

Now I can get in and start building Menu Areas specific to this theme.

I want to create 2 dynamic menus. The first will be a menu of social media icons (Facebook, Twitter, and Instagram), and the second will be a list of interconnected domain URLs, as I’ve done before.

e.g.

In the admin area, I gave the first menu a “Menu Name” of “Subdomain Area”.

WordPress needs to know where menus should go in the theme – and uses something called menu locations to do it. There are no selectable menu locations at the moment. So we have to make some. And we can do that by using a method called  register_nav_menus() that goes into a WordPress function. The first parameter is a key name that is the unique identifier for the menu area. The remaining 2 values match the Menu Name I gave in the admin area and use the textdomain value for the WordPress theme.

<?php
function main_jgdm_menu(){

    register_nav_menus( array(

        'subdomain-menu' => __( 'Subdomain_Menu', 'jgdm_blog' )
    ) );

}

So now we have a defined menu area. We have the information we need. Now we just need to find the place in the template to put it, which is where the wp_nav_menu() method comes in. It takes a ‘theme-location‘ parameter which in this case is ‘subdomain-menu’. If the menu didn’t have this matching parameter, WordPress wouldn’t know what links to display and simply list all the pages that it can find in the database.

<?php wp_nav_menu( array(
    'theme_location' => 'subdomain-menu'
) ); ?>

With that in place, I then selected the menu location in the admin area so everything was in place to the correct links to show up.

Next, we need to take care of some styling differences between WordPress output and what’s in your theme design. There are now some modifications required to the styling.

In my design, the containing <nav> element uses a class of .subdomain-list, but by default, WordPress doesn’t use it in its output.

To specify a container class to match the design in your static files you can add a second line to wp-nav-menu.

<?php wp_nav_menu( array(
    'theme_location' => 'subdomain-menu',
    'container_class' => 'subdomain-list'
) ); ?>

Now to fix an issue where the menu list bleeds onto a new line. This happened because there’s more text in the dynamic menu than I put together in the browser mockup I created. I put a stop to it by increasing the minimum width of the subdomain list so the text is never forced onto a new line no matter how much space is available.

.subdomain-list {

    min-width: 400px;
    width: 345px;
}

I repeated the same process as above for the Social media navigation area, which was image rather than text based.

<img class="social-icon" 
    src="<?php echo get_template_directory_uri(); ?>
    /files/images/social/facebook.png" 
    alt="Facebook" title="Facebook" />

<img class="social-icon"
     src="<?php echo get_template_directory_uri(); ?>
     /files/images/social/twitter.png" 
     alt="Twitter" title="Twitter" />

What I did to get social icons working with a WordPress menu

First, with the social icons in place, I took a close look at the source attribute and identified the portions of the file path that the get_template_directory_uri() uses.  So this becomes http://localhost/jgdm_blog/wp-content/themes/jgdm_blog_2023/files/….

Having identified the base URLs, I pasted each <img> element and their paths into “navigation text” in the admin area. I can also put the URLs for the social media accounts, so they’re customisable as well.

<img class="social-icon"
    src="<?php echo get_template_directory_uri(); ?>
    /files/images/social/instagram.png"
    alt="Instagram" title="Instagram" />

Let’s compare some differences again.

.social_container {

}

First, ensure you’re using the right container element. In WordPress, this  is a <div>element rather than a <nav>element as originally intended in my design.

Secondly, WordPress outputs menu areas in an unordered list (ul) whereas I used div elements to organise mine. To fix this for WordPress to display the same way I simply set list items to go side by side in inline-block.

// list items [WordPress]
ul {

    li {

        display: inline-block;
    }
}

Building the welcome text paragraph in index.php

There are 2 more sections I want to work on in this post. The first one is what is a simple paragraph of text that welcomes users to the website. It would have been simpler to just use the code below inside the php template. But I like to use WordPress as much as possible to make things customisable.

<h2>Welcome

<p>Sensors indicate no shuttle or other ships in this sector. 
According to coordinates, we have travelled 7,000 light years 
and are located near the system J-25. Without our shields, at 
this range it is probable a photon detonation could destroy 
the Enterprise.</p>

The first thing I did to try and do this was to use existing custom post types and fields so I could dynamically customise the text there. I wanted to utilise the existing custom post type from the installation I’m using to develop this, which has the “blog_posts” slug.

<?php

    $array = array(
        "post_type" => "blog_posts"
    );

    $query = new WP_Query( $array );
?>

But as I quickly realised, this wasn’t really an appropriate method for this section because what this does look for the latest instance of that custom field so I’d have to update those fields every time I publish a new blog post.

<p><?php the_field("article_blurb") ?></p>

It’s more appropriate to have a Widget area. Not a custom field. And We can achieve this with theregister_sidebar() method like we did with creating menu areas.

In functions.php this is how we make a sidebar. Typically we register the sidebars using 4 parameters ‘name’, ‘description’, ‘id’ and ‘before_widget’.

<?php
register_sidebar( array (

    'name' => __( ' widget_welcomme'),
    'id' => 'welcome-homepage',
    'description' => __( 'Welcome - homepage') ,
    'before_widget' => ''
)
);
?>

We then use the dynamic_sidebar() to place the widget area in the design and pass it the string value of the newly created id attribute.

<?php dynamic_sidebar( "welcome-homepage" ); ?>

Linking to and from the single.php template

With the widget area sorted out, I now turn to the next part, which is the “latest blog” section, highlighting the single most recent blog published on the website. This will require me to retrieve the URL to the blog and some blog text.  And this time we really can utilise a Custom (WP) Query.

Firstly, I put the the_permalink() method into an anchor element, making sure that it would find the single.php template.  It’ll look at the WordPress Posts Core template for now but we’ll change that in a bit.

<a href="<?php the_permalink(); ?>" target="blank" id="btn_readon">Read On... ></a>

And then in single.php I modified the anchor element with the class .link_home to send the user back to the homepage by passing a string to bloginfo() method

<a href="<?php bloginfo("home"); ?>" class="link_home">Home</a>

Next, it’s time to ensure we’re using the “blog_posts” custom post type with the WP Query.  Since we only want to show the most recently returned result (the most recent blog) we need to pass the “posts_per_page” parameter and give it an integer of one.

<?php
    <-- Read more button section -->
    $array = array(

        "post_type" => "blog_posts",
        "posts_per_page" => 1
    );

    $query = new WP_Query( $array );
?>

In the next code snippet below, I’ve defined a new WordPress Loop, which has the custom query attached to it.  Inside it is a level 2 heading and a custom field retrieval method, inside a paragraph. By default this will look for multiple posts, and therefore multiple posts. But since this custom query has the posts per page parameter in it, we don’t need to worry about that and can rely on the fact that only the most recent posting will show up, which is exactly what we need.

And with the custom field in place, I only need to make sure I’m retrieving the right custom field.

<?php if( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

    <h2>On the latest blog...</h2>

    <!-- get field article blurb -->
    <p><?php the_field("article_blurb") ?></p>

    <!--get field url -->
    <a href="<?php the_permalink(); ?>" target="blank" id="btn_readon">Read On... ></a>

<?php endwhile; ?>
<?php else: ?>
<?php endif ?>

And because it’s within the loop, the query the permalink method will bring up the URL for that post type and not the WP Core Post Type.

Conclusion

I’ve done a lot in this blog. I’ve set up menu areas for the website’s external links, I’ve created a navigation point between the homepage and the single.php; and at least one widget area and custom query.

The next task is to set up the image carousel on the homepage and work on the rest of the widget areas.

This post has been assigned to the following categories

    Leave a Reply

    Your email address will not be published. Required fields are marked *