[Badlywired]

This will do it (add to your functions.php)

add_action ('genesis_doctype','myscript',20);
function myscript() {
	?>
	<script src=”//cdn.optimizely.com/js/2801570498.js”></script>
	<?php
}

Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZEWW5LKK5995J

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

try

.site-header { background-size: 100%!important; }

To get your header image to resize resposively

edit:

Ooops I didn't realise the original post was over a year ago!

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

Hi all.

Integrating WooCommerce to Genesis isn't difficult. But I have just thrown together a plugin to make it dead simple

Here it is https://badlywired.com/2015/04/genesis-woocommerce/ its avery rough page as I have literally just thrown it together

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

It could be related to the javascript library 'backstretch' that is used to display the background image.

Frankly that isn't needed for your site and could be removed and replaced with standard CSS

find the 'enqueue' with 'backstretch in them and commend them out

body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

will work with most browsers & versions where you have the background in your theme images file as bg.jpg or whather you want

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

Yes

edit

wp-content/themes/sixteen-nine-pro/js/backstretch-set.js

this is what sets the bg image in your theme

jQuery(document).ready(function($) {
	$("body").backstretch([BackStretchImg.src],{duration:3000,fade:750});
});

To something that doesn't load on the pages you dont want,

e.g. if you don't want it on your contact page, which is page id 46, it has a class body.page-id-46 (see https://badlywired.com/2015/01/applying-styling-specific-wordpress-page/ to explain )

so your new code becomes

jQuery(document).ready(function($) {
	$("body:not(body.page-id-46)").backstretch([BackStretchImg.src],{duration:3000,fade:750});
});

see https://api.jquery.com/not-selector/

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

ACF is used by lots.

Personally I prefer to use the Custom Meta Box 2 library and 'hard code' the custom fields. CMB2 doesn't have a fancy gui, but is really simple object based definition of custom meta boxes https://github.com/WebDevStudios/CMB2

My main logic here is I don't like the concept of a 'front end' that can change the custom fields that are actually hard coded into a theme, it means an administrator can break things. If you are going to design a theme and code functionality to use custom fields, its no hardship to define their meta boxes in simple OO code definitions.

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

If you have an XML file you can just use WP All Import.

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

You will need to know the basics of coding, i.e. the principals such are variables, conditional statements etc and also a basic understanding of how web pages are served to the internet by webservers, then you will also need a good understanding of HTML, a good understanding of CSS, a moderate understanding of Javascript (specifically jQuery) and and a moderate understanding of PHP (to start with but depends what you want to develop), as well as a reasonable understanding of WordPress functions and Genesis hook & filters.

Thats to do the development part.

Of course you want to create your own themes, so you will also need design skills too.

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

Personally I use Chrome. right click inspect element. It it really the easiest once you get used to it. It even tells you what line in the style.css

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

I'd probably just hard code the logo into the first nav element based on this

Add Nav Extras

e.g.

<?php
//* Do NOT include the opening php tag

add_filter( 'wp_nav_menu_items', 'theme_logo_menu_extras', 10, 2 );

function theme_logo_menu_extras( $menu, $args ) {

	//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
	if ( 'primary' !== $args->theme_location )
		return $menu;

      // add a list item containing an image to front of menu, style with css
	$menu.= '<li class="logo"><img src="---change to path to image---" ></li>' . $menu;

	return $menu;
}

Or similar

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

No problem, I do it all day.

It does get a bit complex when playing around with positioning things and send stuff to the back etc.

The CSS approach worked here, although personally I would have reconstructed the home page using Genesis hooks to get everything sequenced right in the first place. But that is definitely in the more advanced class.

Check out my blog for other tips I write up as I find them.

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

.site-header {
       position:relative;
       z-index: 9999;}
.home-featured {
      position: relative; 
      top: -80px;
       }
.home-featured .wrap {
      width: 100%;
      max-width: 100%;
}

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

I'm taking a look, leave it like it is for the moment

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

If you want to put the slider up and behind the header, this can be done with css too.

.site-container {position: relative;}
.site-header {z-index: 9999;}
.home-featured {position: absolute; top: 0;}

will probably do it.

Are you getting paid for this job?

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

are you saying .home-featured .wrap {width: 100%;} didn't make the slider full width?

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

p.s. you might want to change

.site-header .wrap {
  background-color: #1a212b;
  color: #fff;
}

to

.site-header  {
  background-color: #1a212b;
  color: #fff;
}

otherwise you'll have a strange 'wrapped' header with white gaps, followed by a full width slider

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

As mentioned, its to do with the structured wraps.

But indeed, a bit of css should sort it just making the home featured structured wrap 100%. I wasn't thinking that way (its late)

.home-featured .wrap {width: 100%;}

should do it.

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

In the demo it isn't a slider, it is a single background image. Interesting it uses a script called backstretch that could
be fairly easily reprogrammed into a slider with a bit of skill. http://srobbin.com/jquery-plugins/backstretch/

change js/backstrech-set.js
to contain, and the paths to your own images

jQuery(document).ready(function($) {
	$.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
    ], {duration: 3000, fade: 750});
});

Although I don't expect that is what you want, its is one approach.

In case you don't know you add that single image via customizer/background image.

The other approach need a bit more though about the structural wraps, that keep the site 'inside' the width, you will be able to do this by hooking into the write area, but it isn't something I can solve off the cuff without actually being 'in' the site. But basically, it is a case of better understanding genesis, wraps and hooks.

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

The background on apple is transparent it is styled as such

background: #444;
  background: rgba(0,0,0,0.6);

The second line rgba has 4 parameter, the being the opacity. The #444 is just fallback for browser that can cope with rgba.

However you will need to create an overlap between your slider & nav background to get the transparency effect.

---

My techy blog WordPress and stuff badlywired.com

[Badlywired]

It is triggered by some javascrit

Look in the js directory

You will find responsive-menu.js

And line like

if(window.innerWidth > 768)

change the 768 to the value you want

Please visit my blog for other tips

---

My techy blog WordPress and stuff badlywired.com

[Author]

Posts