Making Author Pro front page full width without a plugin?

[AS7]

Hello everyone!

I'm using WordPress with the Genesis Author Pro theme, but I suppose my question could apply to other themes.

I'd like my front page content to be full-width, so literally extending from the left side to the right side of the screen, with no "margins". However, with Author Pro, you have this "box" that encompasses the front page content no matter what.

Now I've solved this so far by using the Genesis Dambuster plugin. I check "Full width page" and "Enable Dambuster on the front page" and that works like a charm. Yet it seems that Dambuster is no longer maintained, so I worry this may be a security risk or a source of issues down the line.

My question is this: does anyone know how to modify the php/CSS of the Author Pro theme to achieve the same front page full-width effect without needing a plugin?

If you could publish your step-by-step guide for doing so, I'd be very grateful 🙂

AS7

[Mikcrjgf]

Modifying the PHP/CSS of a WordPress theme can be a complex task, and it's important to take precautions to ensure that your modifications don't break your website or cause security issues. It's always a good idea to make a backup of your website before making any modifications to your theme or code.

Here are the general steps you can follow to modify the Author Pro theme to achieve a full-width front page without using a plugin:

Create a child theme: It's important to modify WordPress themes using a child theme, so that your changes will not be overwritten when the parent theme is updated. You can create a child theme by following the instructions on the WordPress Codex.

Modify the PHP template for the front page: In your child theme, create a new file called "front-page.php" and copy the contents of the original "front-page.php" file from the parent theme. Then, modify the file to remove any elements that are causing the content to be constrained within a box. This may involve removing or modifying elements such as divs or containers that are limiting the width of the content.

Modify the CSS for the front page: In your child theme, create a new file called "style.css" and copy the contents of the original "style.css" file from the parent theme. Then, modify the file to remove any styles that are constraining the width of the front page content. This may involve modifying or removing styles for elements such as containers, padding, or margins E Shram Card | e Shram card registration | E shram card download
.

Test your changes: After making modifications to your child theme, it's important to test your changes thoroughly to ensure that they work correctly and do not cause any issues. Test your changes on different devices and browsers to ensure that your full-width front page looks good and functions correctly for all users.

Keep in mind that modifying the PHP/CSS of a WordPress theme can be complex and may require some technical knowledge. If you're not comfortable making these modifications yourself, you may want to consider hiring a professional WordPress developer to assist you.

[AS7]

Hello Mikcrjgf,

Thank you for your assistance! It looks like a plan, I'll try your method (when I'm able to take some time for all this tinkering 😀) and if I find the solution I may post it here to help other users.

Cheers,

AS7

[justinbenz451]

Hello! It's great to hear that you have found a solution to make your front page full-width using the Genesis Dambuster plugin. If you want to modify the PHP/CSS of the Author Pro theme to achieve the same effect, you may need to consult the theme's documentation or reach out to the theme's support team for guidance on how to Download this. Alternatively, you can try searching for tutorials or resources online that can help you modify the code yourself. Just be sure to backup your site before making any changes. Good luck!

[AS7]

Thank you justinbenz45, just saw your reply. I'll keep you posted (when I get to it!) 🙂

[brycejune]

Hi,
Hope so you're doing good, work on below points and will definitely work for you:
Create a child theme: It's important to create a child theme before making any modifications to the theme files. This way, your changes won't be overwritten when the theme is updated.

Locate the front page template file: In your child theme, find the front page template file. It is usually named something like front-page.php or home.php.

Edit the template file: Open the front page template file in a code editor and look for the main content section. It might be enclosed within a <div> or a <section> tag.

Remove any container or wrapper div: If there is a container or wrapper <div> around the main content section, remove it. This will allow the content to extend from the left to the right side of the screen.

Adjust CSS styles: If necessary, you may need to adjust the CSS styles to ensure the full-width effect is applied correctly. Look for any CSS classes or IDs related to the main content section and modify their width properties to 100%.

Save and upload changes: Save the modified template file and upload it to your child theme directory, replacing the existing file if needed.

Clear caching: If you have any caching plugins or services active, clear the cache to see the changes reflected on the front end.

Hope so this will help you!

Regards,
Bryce June

[Jelly4567]

To make the front page of the Author Pro theme full width without using a plugin, you can modify the theme's files directly. Here's a step-by-step guide to help you achieve that:

Access your WordPress installation via FTP or a file manager provided by your hosting provider.

Navigate to the /wp-content/themes/author-pro/ directory.

Look for the front-page.php file and open it in a code editor.

Find the line of code that starts with <div id="content" class="site-content" role="main">. This is the main content container for the front page.

Replace that line with the following code:

php
Copy code
<div id="content" class="site-content full-width" role="main">
Save the changes and upload the modified front-page.php file back to your server, replacing the original file.

Now, you need to add some CSS styles to make the content full width. Open the style.css file located in the same directory (/wp-content/themes/author-pro/).

Scroll to the bottom of the file and add the following CSS code:

css
Copy code
.site-content.full-width {
margin: 0;
max-width: none;
}
Save the changes to the style.css file and upload it back to your server, replacing the original file.
After completing these steps, the front page junk removal parker co of your Author Pro theme should be full width. Please note that modifying theme files directly may be overwritten if you update the theme in the future. To avoid losing your modifications, it's recommended to use a child theme or a custom CSS plugin to store your changes separately.

Regenerate response

[AS7]

Hello all,

Real sorry, somehow I don't get email alerts for this topic. So again, I just saw your replies @brycejune and @Jelly4567 🙂 Thank you for taking the time!

OK, actually I was coming back here to publish a little fix that I found. But let me first reply to your replies:

---

@brycejune: Just a question: you write "It's important to create a child theme before making any modifications to the theme files. This way, your changes won't be overwritten when the theme is updated", but isn't Author Pro already a child theme? Doesn't that mean that I can edit it at will, and when Genesis updates it won't overwrite anything?

Anyhow, Author Pro has front-page.php, like you said! But it doesn't contain any "main content section". In fact it doesn't contain any <div> or <section> tags...

... It's possible that I'm blind to something obvious, but I'm already stuck here! :p
I know very little about php.

---

@Jelly4567: Thank you! But I searched for <div id="content" class="site-content" role="main"> in front-page.php, and also in functions.php, and it's nowhere to be found. I just searched for "main" in the two files, and that doesn't exist either.
Author Pro seems to be working differently?

---

In the meantime, I tried to find a CSS-based solution. And after some searching (with the help of the web browser Inspector), I seem to have solved the problem with a CSS line. Here it is:

.flexible-widgets.widget-area.widget-halves {
display: inline;
}

When I add this code to the site's CSS, it makes the front page content full width.
It doesn't affect any of the other pages.
It seems to work on screens of all sizes.

So... is this a good solution? Or am I setting myself up for trouble down the line? 🙂

[Author]

Posts