A few problems, mainly with front page sections.

Also, how can I have this area only display posts from a certain category? I found a few topics on this part, but none of the solutions there worked for me.

There isn’t a built in way to limit that section to a certain category, however, if you’re fairly comfortable experimenting with your theme’s PHP then you can achieve what you’re after.

The first step would be for you to set up a child theme.

In case you’re unsure, the following guides provide a good introduction to child themes, including steps to set one up:

• https://codex.wordpress.org/Child_Themes
• https://wordpress.tv/2015/05/12/kathryn-presner-getting-comfortable-with-child-themes/

After you have completed that step, copy the parent’s templates/content-front-news.php file to your child theme’s directory and then open it in your favourite text/code editor.

Locate the following code in that file:

$args = array(
	'posts_per_page'  		=> 7,
	'ignore_sticky_posts' 	=> 1,
	'post__not_in'        	=> $sticky,
);

The above are parameters that define how posts display in the news section: 7 posts are displayed and sticky posts are ignored.

We can add a further parameter that defines a category name that a post must belong to in order to be displayed in that section: ‘category_name’ => ‘example’,

You would replace example with the name of the category you wish to use. Here’s how that would come together as a whole with the other paremeters:

$args = array(
	'posts_per_page'  		=> 7,
	'ignore_sticky_posts' 	=> 1,
	'post__not_in'        	=> $sticky,
	'category_name' => 'example',
);

In case you’re interested in the more technical side: A WordPress class named WP_Query is responsible for taking in the above parameters and you can read a little more about that class as well as other possible parameters here:

https://codex.wordpress.org/Class_Reference/WP_Query

Hope that’s all clear!

3) On the fourth slide (Media) I have three widget areas. Originally this section had 4 narrow widgets but I was able to find some code that expanded the width and gave me a comfortable size for 3 widgets. It appears that there is more padding on the left side of the widget area than the right. How can I center these so they have an equal buffer on both left/right?

The extra padding to the left is being added via the following in the theme’s style.css file:

@media only screen and (min-width: 64.063em) {
    .widget {
        padding-left: 80px;
    }
}

If you’d like to remove that then you can do so by adding the following to your custom CSS:

@media only screen and (min-width: 64.063em) {
    .widget {
        padding-left: 0;
    }
}

5) How can I make the bottom navigation bar not appear? I don’t want to delete it totally, just a piece of code I can add/remove as needed to hide/display the bar as needed.

The footer navigation can be hidden with some custom CSS:

#footer-navigation {
    display: none;
}

If you have a child theme set up and would like to completely remove the underlying code then copy/paste the theme’s footer-para.php file to your child theme’s directory. From there, remove the chunk of code starting here:

<nav id="footer-navigation" class="main-navigation" role="navigation">

And ending here:

</nav><!-- #footer-navigation .main-navigation -->

Hope that’s helpful! We’re right here if you have any extra questions on any of the above, too.

Hi @bboutilier26,

I’m glad the code I provided works well!

As you decrease the width of the page, at a certain point the header image drops and the page scrolls differently. How the page reacts once the browser gets narrower is how we’d like the page to act always, regardless of browser width.

The scrolling behaviour you see on desktop is known as parallax scrolling and is one of the features of the theme. If you’d like to override it, though, then you can do so with the following custom CSS:

@media only screen and (min-width: 1140px) {
    .bcg {
        background-attachment: inherit;
    }
}

Also, is it possible for the bottom navigation bar to only span the width of the links, with a small amount of padding before the first link and after the last?

The width of that navigation bar is currently set to 100%. You can change it so that it only spans the width of the links with the following:

#footer-nav-wrapper {
    width: inherit;
}

Hope that helps out!

@bboutilier26: You can definitely move the positioning and change the size of most elements on your site with some custom CSS.

The following would increase the space between the footer navigation and the left side of the screen:

@media only screen and (min-width: 64.063em) {
    #footer-nav-wrapper {
        margin-left: 11%;
    }
}

Increase/decrease the value of margin-left to your liking.

The following would decrease the padding to the top and bottom of the footer:

@media only screen and (min-width: 64.063em) {
    #footer-navigation li a, #footer-navigation li a:visited {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

As before, increase/decrease the values of padding-top and padding-bottom to your liking

If you’re curious about how I found the needed CSS: I used my browser’s built in tools to inspect the theme’s existing CSS and experiment with the specific CSS for your needs. We have guidance on how you could use your browser’s tool in a similar way here:

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

I’ve been trying to adjust the width of the bottom navigation bar so that there is an equal buffer on both sides, before the bar starts and after it ends.

Could you clarify what you mean by this? Are you trying to centre the menu on your screen?

Over the next few days I may have some questions about fonts and mobile view. If I’m unable to solve those myself, should I continue with those questions here, or start a new thread?

Please create separate threads for each distinct question that you have.

As a heads up: The Automattic team are currently at our annual company retreat and it may therefore take us a little longer than usual to get back to you. All questions started on this forum will get a reply, though. 🙂

Hi Brad,

Thank you so much for your patience and the screenshot.

You could adjust the padding to the left and right of the links in that footer in order to even up the spacing:

@media only screen and (min-width: 64.063em) {
    #footer-navigation li a {
        padding-left: 30px;
        padding-right: 30px;
    }
}

Let me know how you get on with that.