Search bar , Footer Columns, New Page Template

And if I did want to do the slider, what suggestions would you have for that?

The simplest way would be to choose one of the many slider plugins available in the repository. You could try experimenting with a few until you find one that you like the best.

3. Page:
Thank you. Are you saying the only/best way to do this is in wordpress settings? Or is there a way to create this somehow in my child theme files?

Neither. ??

Just add the content to your page through your WordPress dashboard, under Pages. Select the page in question, and make your edits in the page editor, the same way you would with any other post or page.

Based on what you seem to want, I don’t think you need to create a new template.

If I’m still not clear on what you’re trying to do, let me know. ??

1. Sidebar – what I have already is the code from the searchform.php placed inside the header.php after line 73 and I added the css you suggested above. Instead of “newsearch” I have it as “searchform” same as what’s in the searchform.php. I tried your way as well and it seemed to not make a difference with either code. It still resides just below the main menu navigation bar. Do I need to put the css somewhere along with one of the navigation styles?

2. Footer – here’s a link to a screenshot:
https://testpalanca.bethparrattdesign.com/footer/

3. Page – Slider- If I add the slider would there be a way for me to add it only onto that page? I would like to keep the main page the way it is.
– Page – Photo Grid- I will look into this then through the page editor. It just seemed like something that would be more part of the design if it was in the child theme vs being set up in the wordpress dashboard. But I will definitely check it out!!

2. Footer – maybe this is happening when I look at the site using Chrome. I just went into my dashboard and add a sub page under Neighborhoods and it did something weird there. After I went back to the main page, the layout of the sidebar was out of wack too. Are there certain settings I need to call out for Chrome to recognize properly? Thanks again!

Hi Kathryn,

I’ve update the code you suggested for the 1-Searchbar but I’m still having trouble styling it so it goes within the menu navigation bar. Any chance you have further suggestions?

Still stuck on my footer.

Thanks again for any help!

Hi there, for the search bar issue, would you mind doing what I asked earlier and paste the contents of your header.php file in a Pastebin and link to it here so I can take a look?

Looking at the generated source code in your browser, I think you’re missing a closing </div> tag.

Original:

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
</div>

I think you may have omitted the closing div tag when you added the code I provided above, but I can tell you for sure when you link to your Pastebin.

For your new slider questions, would you mind starting a new thread, since this one is getting extremely long? You can probably see now why separate threads for each question is a good idea. ?? Thanks.

For your footer, I see what you mean in Chrome. When you view the browser source, you can see some syntax errors that should be fixed:

<div id="footer-col">
	<p><ul>
	<li><a href="https://bethparrattdesign.com">about</a></li>
	<li>town</li>
	<li>listings</li>
	<li>site map</li>
	<li>unsubscribe</li>
	<br>
	<li>neighborhoods</li>
	<li>to-do</li>
	<li>see</li>
	<li>eat</li>
	<li>listings</li>
	<br>
	<li>facebook</li>
	<li>twitter</li>
	<li>pinterest</li>
	<li>instagram</li>
	<li>subscribe</li></p>
	</div>

Remove the paragraph tags before the first item and after the last list items.

Remove the line breaks within your list.

You shouldn’t use line breaks to create columns, that isn’t a reliable or semantic method, as you can see. ??

Try using divs instead.

<div class="footerlist">list 1</div>
<div class="footerlist">list 2</div>
<div class="footerlist">list 3</div>

Use CSS to give your footerlist class a width and float them side-by-side.

There are some other HTML syntax errors I see that should be fixed – try running your site through an HTML validator to catch and fix them, or view the source in Firefox and the errors will be in red.

Hi Kathryn,

Thanks regarding the footer, I will look into that. And yes, if I continue having questions regarding the slider I will post in a separate thread.

Regarding the searchbar. Here’s the link to the code: https://pastebin.com/w1jYBHZG

Thanks again!

Hi Kathryn,

I updated the footer.php with this code: https://pastebin.com/y8JhjqQm is that right, or is there code in the beginning that should be deleted? I have not uploaded it yet because I wanted to check this before I add to my css.

Thanks!

Regarding the searchbar. Here’s the link to the code:

Thanks. As I suspected, you’re missing a </div> tag between lines 74 and 75. You can see it if you compare your modified file to the original, unedited, header.php in the theme.

Before:

<div id="newsearch"><?php get_search_form(); ?></div>
</header><!-- #masthead .site-header -->

After:

<div id="newsearch"><?php get_search_form(); ?></div>
</div> /* missing original closing div tag here */
</header><!-- #masthead .site-header -->

I updated the footer.php with this code: https://pastebin.com/y8JhjqQm is that right, or is there code in the beginning that should be deleted? I have not uploaded it yet because I wanted to check this before I add to my css.

Not quite. ?? Each of your three lists needs to go inside its containing div. For example:

<div class="footerlist">
        <ul>
        <li><a href="https://bethparrattdesign.com">about</a></li>
        <li>town</li>
        <li>listings</li>
        <li>site map</li>
        <li>unsubscribe</li>
        </ul>
</div>

Thanks! I’ve updated the header.php. But, the searchbar is still in the same spot, so I’m guessing something further is needed in the css … any suggestions?

Thanks for the clarification on the footer divs…. But do I make each div the same class (footerlist) or is it better to make them all separate, such as footerlist-1, footerlist-2, or something like that? Because what I have in my css right now is for an id tag of footer-col which is now in my footer.php right before the footerlists.

This is the css I have in there now for it, which I actually grabbed/modified from something else:

`#footer-col {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
margin-left: 4em;
margin-top: .2em;
margin-bottom: .2em;
border-top: 1px dotted #b3b3b3;
clear: both;
margin: 1.5714285714em 0 0 0;
}
#footer-col li{
list-style-type: none;
}’

So I’m wondering if I have all the lists under class – footerlist, where the style should come in. Sorry I’m really confused now on this. Perhaps this should now start a new thread as well.

Thanks again!

Thanks! I’ve updated the header.php. But, the searchbar is still in the same spot, so I’m guessing something further is needed in the css … any suggestions?

I double-checked the code I gave you earlier on my test site to make sure it works, and you can see what it looks like here:

Remember earlier when I mentioned that you have some basic HTML errors that should be fixed? I still see some of them, and they could be affecting the layout. Did you do what I suggested here:

There are some other HTML syntax errors I see that should be fixed – try running your site through an HTML validator to catch and fix them, or view the source in Firefox and the errors will be in red.

https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.bethparrattdesign.com%2F

In particular, any unbalanced tags (opened somewhere but not closed, or closed somewhere but never opened) can impact the layout. For example:

End tag div seen, but there were open elements.

Unclosed element footer.

To troubleshoot these sorts of errors, you can try turning on “View Source” in the validator, to more clearly see which line has the problem:

Thanks for the clarification on the footer divs…. But do I make each div the same class (footerlist) or is it better to make them all separate, such as footerlist-1, footerlist-2, or something like that? Because what I have in my css right now is for an id tag of footer-col which is now in my footer.php right before the footerlists.

If the CSS for each footer column is going to be the same, there’s no reason to give them separate IDs or classes.

This is the css I have in there now for it, which I actually grabbed/modified from something else:

If you’re going to use the class for each column, you need to use a class (i.e. .footer-col) instead of an ID. (i.e. #footer-col). Classes can be used as many times as needed on a page, but IDs can only be used once.

As I mentioned earlier, the main things to do with your column CSS is to define a width (about a third of the page) and float them.

For example, something like:

.footerlist {
  width: 30%
  float: left;
}

To remove the default bullets on your list, you can add this:

.footerlist li{
  list-style-type: none;
}

I suggest you experiment to tweak things until you’re happy with the look and feel.

Sorry I’m really confused now on this. Perhaps this should now start a new thread as well.

It sounds like you might really benefit from some basic CSS/HTML guidance to help you go further with your theme. I’ve compiled some resources here – you might want to check out the ones in the last two sections on CSS and HTML.

https://zoonini.wordpress.com/

If you need further help with your footer structure, I suggest posting in the general Themes support forum, since structuring columns with HTML and CSS isn’t a Sundance-specific – or even WordPress-specific – question, and I’m sure there are many folks who’ll be able to help. ??