dwkelley

Thank you for your response – sorry I just got back to this. What I was wondering is if I can have a list on one page that sorts a category by surname and a list on another page that sorts a different category by the first letter of the term/first name. I did add the coding to the functions file that worked to get the surnames listed alphabetically but it doesn’t seem to work at all with the new update. Plus I’m uncertain how to just have that code affect one category and not the other – I’ve tried a few things but not working so far.

I should probably add that this has all been done in a child theme of Twenty Nineteen

Hey there, sorry about that James! Will remember that for next time.

As far as the issue for Michael (thank you for responding!) we registered a sidebar in functions.php – code is below:

add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
    /* Register the 'blog' sidebar. */
    register_sidebar(
        array(
            'id'            => 'blog',
            'name'          => __( 'Blog Sidebar' ),
            'description'   => __( 'Sidebar for the posts page.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
    /* Repeat register_sidebar() code for additional sidebars. */
}

This is the code we use to call the sidebar in the blog page template (index.php):

<main id="main" class="site-main">
						<?php get_sidebar( 'blog' ); ?>
		<?php
		if ( have_posts() ) {

			// Load posts loop.
			while ( have_posts() ) {
				the_post();
				get_template_part( 'template-parts/content/content' );
			}

In the blog sidebar widget area, we then added the standard search, recent posts and archive blog widgets. We then styled them with CSS, which is below:

/* Search Bar and Widgets */
h3.widget-title {
	font-size: .85em;
	color: #333;
	font-weight: 500;
	text-transform: uppercase;
}
h3.widget-title:after {
    content: "";
    display: block;
    margin: 0;
    width: 50px;
    padding-top: 15px;
    border-bottom: 2px solid #999;
}
.widget_search .search-submit {
    display: block;
    margin-top: 1rem;
}
input.search-submit {
    transition: background         150ms ease-in-out;
    background: #5018c2;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    color: #fff;
    font-size: 0.65em;
	  text-transform: uppercase;
    font-weight: 500;
    line-height: .85;
    outline: none;
    padding: 0.55rem .55rem;
    text-decoration: none;
    vertical-align: bottom;
}
.widget_search .search-field {
	width: 75%;
}
input.search-field {
	font-size: .85em;
}
.widget-title{
	font-size: .85em;
}
#sidebar-blog a {
	font-size: .85em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	color: #666;
}
#sidebar-blog a:hover {
	font-size: .85em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	color: #5018c2;
}
select#archives-dropdown-3 {
	font-size: .65em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
#sidebar-blog .post-date {
	font-size: .65em;
	font-weight: 400;
	letter-spacing: 1;
	font-style: italic;
		font-family: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
	color: #666;
}
#sidebar-blog {
	float: right;
	padding-right: 5px;
}

Here is a screengrab of the page in question on snipboard:

https://snipboard.io/sNKULq.jpg

This is the posts page that we designated. Not quite sure how to style it so that the posts show up on the left and the archive and other miscellaneous items show up in the right side block, much like this page.

Thank you for the response. We do already have a child theme but thought perhaps it would just be easier to use blocks. We did try adding elements to a block to function as a sidebar on the page we have chosen to display our blog posts but they don’t show for some reason.

Thank you James! We actually picked Blue Host today and are in the process of getting everything up and running.

Thank you Andrew! We’ll just keep plugging along and we plan on getting it online very soon. Just trying to figure out the right host for it.

No I haven’t. I did add the spider controller so I could show the spiders too but nothing else. This is the code in main.js:

(function () {
new BugController();

new SpiderController();

})();

I went ahead and copied the two image files back into the grimtravelers.net/wordpress folder area just to test it and now it works, spiders included. It’s just strange that it’s pulling the images from there instead of the child theme; I don’t know enough about javascript to figure out why I guess.

• This reply was modified 5 years, 7 months ago by dwkelley.
• This reply was modified 5 years, 7 months ago by dwkelley.

Thank you Andrew – I went ahead and took the files out and put them in just the theme. Still not working but a bit of a different error message in the console now:

JQMIGRATE: Migrate is installed, version 1.4.1
spider-sprite.png:1 GET https://localhost/grimtravelers.net/wordpress/spider-sprite.png 404 (Not Found)
bug-min.js?ver=5.2.2:29 GET https://localhost/grimtravelers.net/wordpress/fly-sprite.png 404 (Not Found)
flyIn @ bug-min.js?ver=5.2.2:29
(anonymous) @ bug-min.js?ver=5.2.2:9
setTimeout (async)
initialize @ bug-min.js?ver=5.2.2:9
BugController @ bug-min.js?ver=5.2.2:14
(anonymous) @ main.js?ver=5.2.2:2
(anonymous) @ main.js?ver=5.2.2:5
spider-sprite.png:1 GET https://localhost/grimtravelers.net/wordpress/spider-sprite.png 404 (Not Found)
bug-min.js?ver=5.2.2:29 GET https://localhost/grimtravelers.net/wordpress/fly-sprite.png 404 (Not Found)
flyIn @ bug-min.js?ver=5.2.2:29
(anonymous) @ bug-min.js?ver=5.2.2:9
setTimeout (async)
initialize @ bug-min.js?ver=5.2.2:9
BugController @ bug-min.js?ver=5.2.2:14
(anonymous) @ main.js?ver=5.2.2:2
(anonymous) @ main.js?ver=5.2.2:5
bug-min.js?ver=5.2.2:36 GET https://localhost/grimtravelers.net/wordpress/spider-sprite.png 404 (Not Found)
bug_near_window_edge @ bug-min.js?ver=5.2.2:36
animate @ bug-min.js?ver=5.2.2:20
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
requestAnimationFrame (async)
animate @ bug-min.js?ver=5.2.2:19
(anonymous) @ bug-min.js?ver=5.2.2:19
7bug-min.js?ver=5.2.2:29 GET https://localhost/grimtravelers.net/wordpress/fly-sprite.png 404 (Not Found)

Thank you Andrew – here is the info from the console tab. When I first saw these 404 errors, I went in and copied the fly and spider sprites into the area indicated that they were missing from (theme\wordpress) but I was unsure as to why it was trying to pull them from there instead of the folder I had originally placed them in (the assets folder in the child theme that holds the two javascripts)? That made the fly sprite work on the home page but the spider sprite still didn’t work even though I added a controller for it in the main.js file. I then deleted them out of that area again and cleared the cache so I could reproduce what I saw in the console at first. Thank you again for all of your help with this and sorry if anything is confusing.

JQMIGRATE: Migrate is installed, version 1.4.1
spider-sprite.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fly-sprite.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
2spider-sprite.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
5fly-sprite.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)

• This reply was modified 5 years, 7 months ago by dwkelley.

Ahhh, sorry about the dumb mistake! I changed it which corrected it in the source to be in twentynineteen_child, although it’s still not working on the site, arghhhh. I would ask the creator but it looks like he stopped responding about 2014 or so. We’d really like to try to get this to work and it seems like it should with the info you gave me.

I did also run across this link https://shallowsky.com/blog/tags/wordpress/ which describes how someone added an initialization function when the body of a page is loaded but I’m not sure it’s applicable to my situation.

• This reply was modified 5 years, 7 months ago by dwkelley.

I also noticed when I viewed the source of the page, the scripts are showing up in the source code, yet it looks like they are being stored within the twenty nineteen theme and not the child theme. Is this how it should be? Sorry for all of the questions!

<script type='text/javascript' src='https://localhost/website.net/wordpress/wp-content/themes/twentynineteen/assets/bug-min.js?ver=5.2.2'></script>

<script type='text/javascript' src='https://localhost/website.net/wordpress/wp-content/themes/twentynineteen/assets/main.js?ver=5.2.2'></script>

• This reply was modified 5 years, 7 months ago by Jan Dembowski.

Thank you Andrew – this is how I tried enqueueing the scripts:

function add_scripts(){
	wp_enqueue_script( 'bugmin', get_template_directory_uri().'/assets/bug-min.js' );
	wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/main.js', array( 'bugmin' ));
}
add_action('wp_enqueue_scripts', 'add_scripts');

The code doesn’t seem to throw any errors but it’s not working either. I did create an “Assets” folder that I put the JS and images in within the child theme folder. Am I perhaps not linking correctly?

• This reply was modified 5 years, 7 months ago by dwkelley.
• This reply was modified 5 years, 7 months ago by Jan Dembowski. Reason: Fixed formatting

I was able to figure this out. This is the solution:

.site-header.featured-image .site-branding {
position: fixed;
z-index: 10;
top: 0;
}
.site-branding {
position: fixed;
z-index: 10;
top: 0;
}

Seems to work great so far and combining it with the sticky header plug-in.

Hello Jarret, thanks for your response. This is some of the code we modified to get the general look, although we’re not sure how to get it to stick at the top. We did modify the logo container to be the exact size of our logo without the round radius.

/* Site Branding Container */
.site-branding {
background-color: #000;
width: 100%;
margin-left: 0px;
position: fixed;
}
/* Site Logo */
.site-logo .custom-logo-link {
border-radius: 0;
width: 600px;
height: 146px;
}
@media only screen and (min-width: 768px) {
.site-logo {
position: relative;
z-index: 999;
margin-bottom: calc(.66 * 1rem);
right: auto;
}
}
@media only screen and (min-width: 768px) {
.site-logo .custom-logo-link {
width: 600px;
height: 146px;
}
}
.site-header.featured-image .custom-logo-link {
background: none;
}
/* Main Navigation */
.main-navigation {
padding-left: .35em;
padding-bottom: .35em;
}
.main-navigation .sub-menu {
background-color: rgba(85, 93, 102, .85);
color: #fff;
list-style: none;
padding: 0px;
position: absolute;
opacity: 0;
left: -9999px;
z-index: 99999;
}

The main menu seems to be contained within that site branding area. We’ve done things with PHP before but are not as familiar with it – I imagine we would want to do anything with that within the child theme itself?