• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Show sidebar before content on mobile devices in Genesis

Find out in this tutorial how to display the sidebar before content on mobile in any Genesis child theme using code.

One of the advantages of being an OsomCode subscriber is that you can make suggestions for future tutorials.

The other day, one of them asked me the following question:

Greetings, excellent education tool.
I have a technical question:
How do I make the sidebar appear first in the mobile version of the website? Currently it appears after the content.

Thanks in advance for the help.

By default, the sidebar loads after the content in most WordPress themes, including Genesis child themes

Sidebar with search widget on desktop
Sidebar with search widget on desktop

That’s why, on mobile devices, they always display the widgets after the content.

Sidebar with mobile search widget, by default
Sidebar with mobile search widget, by default

But what happens if you want to display the sidebar before the content?

For example, to display the search widget first.

Well, you can do it easily thanks to the Genesis Framework hooks.

Code to load the sidebar before the content on mobile devices

Add the following code at the end of functions.php or in your functionality plugin:

To see this and another 847 code snippets of this website, login or subscribe here.

With this block you change the order in which the genesis_get_sidebar function, which is responsible for loading the sidebar with the widgets, is executed.

This would be the final result:

Sidebar with search widget loaded before content
Sidebar with search widget loaded before content

Conclusion

Now, thanks to Genesis Framework hooks you can get the sidebar to display before the content on mobile devices if you are using a Genesis child theme.

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉

Genesis Framework PHP Widgets

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?