Altitude Pro – some questions about adding widget areas & adding site logo

[jhguynn]

I'm developing a site locally, so I have no live links to share. I'm using Altitude Pro theme, and I'm reasonably proficient in using and modifying Genesis themes. Nonetheless, I have 2 questions about site modification:

(1) I added 2 extra widget areas to the frontpaae.php by editing functions.php. What file do I modify to add the extra background image I need for one of these newly added widget areas? I can't seem to locate that code.

(2) I want to add a logo image to the site header. none of my usual tricks seem to work here. I can't even find where in the functions.php the image area for logo is even defined. Appreciate some help here.

Regards, Jeff.

[Brad Dalton]

1. The lib > customize.php file.

2. Try the customizer > header image setting.

---

Tutorials for StudioPress Themes.

[jhguynn]

Brad: thanks for chiming in.

The customize --> header image edit did the trick. I'm so used to just coding it manually, I didn't notice that the theme had this built in.

However, I'm not seeing where in the customize.php file the background images are being added to the respective widget areas. Can you enlighten me a bit about this? The background images provided in the theme's image folder are bg-1.jpg, bg-2.jpg, bg-3.jpg, and bg-4.jpg. I want to be able to add bg-5.jpg to the extra widget area I added.

Thanks for any help you can provide.

[James Chai]

If I am following along correctly ...

You can find the folder that contains bg-1.jpg, bg-2.jpg etc with FTP/cPanel access and navigate to wp-content/themes/altitude-pro/images/

All the example/temporary background images are stored there.

Since you are developing locally then you should be able to use
windows explorer => altitude-pro => images and see the images there.

---

Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

[jhguynn]

Jchai: I'm having no problem locating the folder where the background images are stored. My problem is I added an additional widget area to frontpage.php, and I want to define the background image for that new widget area. Brad suggested the correct file to modify would be customize.php. But I looked at that file, and I'm not seeing it.

[jhguynn]

I figured out at least one thing I need to edit in the customize.php file. I needed to register the additional image required to serve as background image in the extra widget area (see '9'):

function altitude_customizer_register( $wp_customize ) {

	$images = apply_filters( 'altitude_images', array( '1', '3', '5', '7', '9' ) );

	$wp_customize->add_section(
		'altitude-settings', array(
			'description' => __( 'Use the included default images or personalize your site by uploading your own images.<br /><br />The default images are <strong>1600 pixels wide and 1050 pixels tall</strong>.', 'altitude-pro' ),
			'title'       => __( 'Front Page Background Images', 'altitude-pro' ),
			'priority'    => 35,
		)
	);

=======

When I visit the "customize" secion of "appearance" controls, the bg-9 image I added to the the folder shows up, but when I visit frontpage.php in my browser, it's not there. I refreshed my cache.

Anybody know what I should do next?

[Brad Dalton]

Hi Jeff

Here's a complete solution i spent a few hours working out for my members.

---

Tutorials for StudioPress Themes.

[jhguynn]

Thank you Brad for pointing me to your paid membership site. I'm sure it has great value.

Anybody else (who knows their way around Altitude Pro) want to help me out with this?

[James Chai]

Did you add the corresponding markup to the front-page.php file?

i.e. (look for the following blocks and add)

if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) || is_active_sidebar( 'front-page-4' ) || is_active_sidebar( 'front-page-5' ) || is_active_sidebar( 'front-page-6' ) || is_active_sidebar( 'front-page-7' ) || is_active_sidebar( 'front-page-9' ) )

also

genesis_widget_area( 'front-page-9', array(
		'before' => '<div id="front-page-9" class="front-page-9"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-9' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

---

Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

[jhguynn]

Jchai:

Thanks for your help, I'm getting closer. I had already added the genesis_widget_area code for front-page-8 (solid-section) and front-page-9 (image-section), but I had neglected to modify the conditionals (i.e. "...if ( is_active_sidebar( 'front-page-1' )...). I added this for widget areas front-page-8 and front-page-9.

But even after saving, clearing image cache, using ctrl + f5 to clear scripts, and refreshing the page...I get no change, i.e. the bg-9 background image I have in the images folder does not appear.

Anything else I might be missing? Happy to take the site live so I can share.

[James Chai]

Post a link and let's see what's under the hood.

---

Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

[jhguynn]

Jchai: here you go, have at it. FYI: the image bg-9 is blue. You'll know it when the image appears.

http://demo.repchampion.com/wp-admin/
Admin Username: StudioPress
Password: ^q!E9%nRLcbXrYF9Y64X18)q

Pound away on the code all you like. This is a demo site. Be sure to tell me how you do it so I can repeat the trick on my real site.

Thanks for your help!

[jhguynn]

Bump. Jchai? I posted a link to my demo site with admin login credentials. See above. Thanks, Jeff.

[James Chai]

@jhguynn give me a couple of days to play around with it and I will get back to you.

Got (3) young boys that were OFF from school for spring break 🙂

---

Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

[Victor Font]

You have to modify the JS file that adds the images to the inline styles. I'm on my iPad at the moment and don't remember the file name off hand. It's in the child theme js directory.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[jhguynn]

Hello Victor: Thanks for pointing me to the javascript. If you could point me a little closer to the file and edits I need to make, I'd really appreciate it. Thanks!

[jhguynn]

Victor Font or JChai: thanks for the guidance so far. "You have to modify the JS file that adds the images to the inline styles". Could you specify which js file, and where is the code that I need to modify and how? I had a look around and was unsuccessful in identifying any code that adds the existing images to the inline styles, let alone being able to add my new images. Thanks.

[jhguynn]

Bump. Trying to get the last piece of the puzzle: know which javascript file to modify and how. JChai? Victor Font? Anybody?

Thanks, Jeff.

[Victor Font]

In Altitude Pro, the images are handled by lib/output.php in lines 19 through 25.

$opts = apply_filters( 'altitude_images', array( '1', '3', '5', '7' ) );

	$settings = array();

	foreach( $opts as $opt ){
		$settings[$opt]['image'] = preg_replace( '/^https?:/', '', get_option( $opt .'-altitude-image', sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $opt ) ) );
	}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[jhguynn]

Boom! That was the last piece of the puzzle. Success! Thanks Victor. 🙂

[Author]

Posts