Customizing WordPress

APD Toronto
APD Toronto used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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 Developer

Author

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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

APD TorontoSoftware Developer

Author

Commented:
Is the Theme URI important,l as I'm developing it on localhost,
APD TorontoSoftware Developer

Author

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 Developer

Author

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?
Don'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.
APD TorontoSoftware Developer

Author

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 Developer

Author

Commented:
No definite solution.  Will re-post at later date.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial