Customizing WordPress

Hi Experts,

How do I customize WP? More specifically, I added a few pages, placed the Pages menu on the left, but I just want to decrease to horizontal space for the menu, and add it to the content?

Thank you.
APD TorontoSoftware DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
Most "look and feel" customizations are accomplished via editing the theme's style.css file.  

If possible, use a child theme:

https://codex.wordpress.org/Child_Themes
https://codex.wordpress.org/CSS
APD TorontoSoftware DeveloperAuthor Commented:
I am using Twenty Fifteen Theme, so how do I do this?
Jason C. LevineDon't talk to me.Commented:
The instructions are in the WordPress Codex link I posted above:

https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

Basically, you create a new folder in wp-content/themes.  Then create a style.css file in that new folder and add the following code to the file:

/*
 Theme Name:   Twenty Fifteen Child <-- CHANGE THIS TO WHATEVER
 Theme URI:    http://example.com/twenty-fifteen-child/ <--- CHANGE THIS TO YOUR FOLDER NAME
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com <--- CHANGE THIS TO YOUR SITE
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

Open in new window


If you want the theme to use the base TwentyFifteen style, create a new file in your child theme folder called functions.php and add this code to it:

<?php 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Open in new window


That imports the base CSS from the TwentyFifteen parent.  You can also copy/paste the CSS from the parent to the child instead.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

APD TorontoSoftware DeveloperAuthor Commented:
Is the Theme URI important,l as I'm developing it on localhost,
APD TorontoSoftware DeveloperAuthor Commented:
I did the steps above and see "Twenty Fifteen Child" blank theme, but now what?
Jason C. LevineDon't talk to me.Commented:
Is the Theme URI important,l as I'm developing it on localhost,

Not really.

I did the steps above and see "Twenty Fifteen Child" blank theme, but now what?

Make the child theme your active theme and add/change the CSS as desired.
APD TorontoSoftware DeveloperAuthor Commented:
What I meant regarding the URI, is that the address will change. For example, I changed the installation folder and all CSS is disabled.

Regarding the child theme, now I have activated the CSS file is empty. What do I add in order to reduce the gap between the side bar and content?
Jason C. LevineDon't talk to me.Commented:
Regarding the child theme, now I have activated the CSS file is empty. What do I add in order to reduce the gap between the side bar and content?

You have to inspect the current site in your browser (right click, inspect element) to see the CSS as it stands now and then add a copy of the relevant rules to your child theme's CSS and change the elements as needed.

Most likely you will be altering a margin-top or padding-top element.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APD TorontoSoftware DeveloperAuthor Commented:
Sorry, I needed to go out of town for emergency.

I added #sidebar and it adjusted a sub-section of the menu, but I cannot find the primary container, which hold sidebar.

From the image attached, I would like the left-hand bar (white part) to be 1/3 of what it is now, and the content to be right next to it glued with no gray area.

This is my css so far

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://localhost/wordpress0/wp-content/themes/twentyfifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/
#sidebar{
	width: 150px;
}
article{
	position: relative;
	top: 0px;
	left: 150px;
}

Open in new window

Capture.JPG
APD TorontoSoftware DeveloperAuthor Commented:
No definite solution.  Will re-post at later date.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.