Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 6 – Question and Answer

Difficulty Level -

Anybody have any questions for me about this? Trish noticed that I had a typo in here that is I spelled widgets instead of widgets. Now, it doesn’t really matter actually except that now that I’ve changed it here, I need to change it in my CSS file too because they have to be the same in both places. This part of my CSS file which I need to download again first since I’m changing it outside of the context.

byob_custom.css is actually a CSS file that’s automatically generated by a number of things like well in this case, I’m working on my testimonial publishing system for Genesis and it prints out the CSS to byob_custom.css and then the child theme editor also writes to the byob_custom.css. Anyway, you can see that that would have to be changed also so the name matched.

Andrea has got a question for me. Good evening Andrea I just unmuted your microphone.

Andrea: Hi Rick.

Rick: Hello.

Andrea: Is the sound too loud?

Rick: No, it’s fine.

Andrea: Okay because I have to turn your sound up really high. I don’t know if that was on my PC or your end…

Rick: I don’t know either.

Front Page Widget Content

Andrea: Okay, I might have missed something somewhere, Brent and I maybe didn’t hear it but when you created the widget on the front, where would that content coming from? Wouldn’t that come from…

Rick: Okay, so that content came from a widget. Create the widget area and then I had this text widget that I’d created with the title and then a bunch of lorem ipsum text.

Andrea: Okay, so that’s new content not existing from another page.

Rick: That is new content.

Andrea: So if you borrow it from the About page or you had.. because I’ve done that on other websites I’m assuming that you could find for because that becomes duplicate.

Rick: Yes, it doesn’t do for you what you want it to do.

Andrea: Right.

Rick: Now you could borrow it from I mean you could create a page that you don’t index that you’re not using that essentially the secondary content and then you could use the featured page worthy to display it instead of this.

Andrea: But you have to not index it.

Rick: You want to not index it because you don’t want two pages with the same primary content.

Andrea: Got you, okay.

Rick: The only other thing is that the featured page widget I believe for schema calls the content an excerpt.

Andrea: Okay do you get dinged for that or not?

Rick: Well, it’s an excerpt I mean it’s just inaccurate.

Andrea: Okay.

Rick: Right, it’s the actual article body or text, those are the two things that would be appropriate for it and I mean I don’t know, let’s just take a look, let’s see what happens, let’s create a page like that. I mean I’m all in favor of creating secondary content and adding them to pages. Add New so this is Main Front Page Content, I want that lorem ipsum text back and then in my SEO settings I would no index it, nofollow, noarchive and then in widgets instead of this one, let’s see I think I have a couple of.. I guess not. Featured page and show the page title, show the page content,that’s about it actually.

The one thing it does is this wraps itself in another so in this case, you wouldn’t use that article. Now, you can see what’s happening here though is that this is not getting any itemscope or itemproperty assigned to it because it’s not the header. It’s an h2 so I guess the text widget is going to provide well, I mean all we have to do you know, first you get rid of this article stuff here in front of this. So you can get rid of the ‘before_widget’ stuff and then the other thing you would do is instead of show page title you’d say Main Front Page Content. Okay so now you’ve got the h1 with the “entry-title”.

You just end up with a conflicting itemscope stuff here. The other problem with this is that now that’s the itemscope so it’s not going to see the “entry-title”. So I guess that’s the problem with the featured page widget is this doesn’t really assume that you are trying to display an entire pages of content some place and so it’s not giving you the right schema for that so I wouldn’t do it that way. I would use the text widget and the system that I just demonstrate here so that you can have all the right schema stuff.

Andrea: Right, okay got it.

Rick: That’s how I’d handle it.

Andrea: I have a question if you have a second.

Rick: Sure.

Tools of the Trade Question

Andrea: I’m not using Chrome. I know you use Chrome most of the time and I have a question – I don’t seem to get the same setup when when I turn it on. So do you have some sort of addons with it or you have settings that aren’t out of the box and whether or not you have something on your site that would inform me of what you do and if not, can you tell me.

Rick: I don’t. You know, I do have a handful of addons. I’ve got this browser size addon, I’ve got the color dropper addon so page color picker is the name of that I guess, I’ve got Measureit.

Andrea: But are any of them affecting the I guess, the console you call it down at the bottom where you inspect the element?

Rick: No.

Andrea: That’s what I don’t seem to get the same, it doesn’t look the same when I put it on.

Rick: Okay, inspect the element theoretically has two pieces. It’s got the console and it’s got actually, I don’t know what you would call this. This is the main thing I use but you can turn the console on or off.

Andrea: Okay.

Rick: And the console is this part here where you can catch javascript errors and you can search sources for stuff. I mean this is the only thing I use it for, is device simulation.

Andrea: I use that where it’s chosen for you but I couldn’t see what the emulation tab was and now it’s here, now you don’t have the settings in it but that seems to be when I look at the screen usually it’s pointing to that tab.

Rick: Yes, so this little blue thing right here will I see it says hide drawer.

Andrea: Okay, so that’s the drawer.

Rick: Yes and if you click on it it opens it up again.

Andrea: Okay. But right now it’s not showing what tabs are on the bottom. Usually we’re watching you do stuff…

Rick: I don’t turn it off I just drag it all the way to the bottom.

Andrea: Got you and what does Chrome has that Firebug doesn’t have and vice versa?

Rick: Well, I find Firefox to be flakier.

Andrea: Okay.

Rick: I have more difficulty getting it to clear a cache so I find it more often is caching the CSS file.

Andrea: Okay.

Rick: And the worst thing is, inspect the element there doesn’t give me dimensions. See right here, it shows me 976 pixels.

Andrea: Right.

Rick: Now on the other hand, I teach all the beginners stuff in Firefox very specifically because it’s got a handful of very nice features that are great for beginners. Let’s see what do I got in here. So view source chart is something I really like because it gives a very nice visual view of things that help. I find beginners understand this sort of layered HTML.

Andrea: Right.

Rick: Right and so understanding HTML inside of HTML you know, divs inside of navs, inside of divs I mean I think this is very useful, the view source chart capacity and inspect (Q) is actually quite nice, I mean I think it works great. Look, it’s showing me the dimension there.

Andrea: Yes.

Rick: Maybe I have to get down here but look at that, it does show me the dimension. I just didn’t notice that before.

Andrea: Maybe it’s new.

Rick: The other thing I love about this again for visualizing, view page source no, that’s not it. Where’s the 3D view?

Andrea: I have not used it but I have seen it.

Rick: 3D view is turned off. So now I want to see that 3D view, where did it go? Oh, it’s just this. I really love that, right. When you’re trying to explain HTML and how different things are fitting inside of each other to somebody, this 3D view is I think really phenomenal and so I love the 3D view because it does a really good job of and if you’ve got this highlighted here, when you click on it above it shows you where you are below so anyway, I’m a huge fan of that but I don’t need that myself. This doesn’t actually help me except to primarily explain HTML to people who don’t really understand it. How did I do that, I just lost my inspect the element.

Andrea: And as far Firebug goes…

Rick: Well, I don’t use Firebug anymore. I’ve stopped using Firebug just because inspect (Q) is built-in and I’m happy with it in chrome.

Andrea: Okay.

Rick: I don’t use Web Developer anymore because Thesis doesn’t need it and Genesis doesn’t either because you just come over here to the style editor and go find the thing that you’re working on and then edit it and then copy and paste. So the old system that I use to teach and I used to use I don’t use very much anymore but I mainly just use Chrome because Chrome has fewer problems for me.

Andrea: Okay. But the functions are similar?

Rick: The functions are very similar and you’re right, it’s time for me to teach a class on the tools fo the trade and cover things like that and also cover this little doohickey. This is Edge Inspect which allows you to throw your inspector onto a mobile device. If you’ve got some mobile anomaly, something wrong on your phone or something, you can hook it up with Edge Inspect and then use inspect element on your big browser but it highlights it on the small browser so you can see where the problem is.

Andrea: Which is great.

Rick: Yes.

Andrea: I have creative cloud..

Rick: Well, an Edge Inspect I think you can use it free for one device. Now, I admit that I find it very useful to have perhaps 3 devices on at the same time so I can see what’s going on in each of them and why one things works in one place and it doesn’t work in another but I use Edge Inspect as much as I use Photoshop. It’s a pretty compelling tool for us.

Andrea: How expensive is it to buy was?

Rick: Well, you said you’re a Creative Cloud subscriber so it doesn’t cost anything.

Andrea: Oh, it’s full okay. I assumed that when you said that it was maybe just for one device.

Rick: No. The free version is free for anybody and you can only have one device hooked up at the time. That’s the only difference between the free version and the Creative Cloud version or the subscription version.

Andrea: Right. Last week you talked a little bit about maybe teaching, we discussed maybe you’re teaching a class on PHP for WordPress so that would be specifically for Genesis or specifically for Thesis but doing it for WordPress since my understanding is usually you’re using WordPress functions except tonight when you have to use the Genesis but I’ve been taking that that would actually be really helpful for me if you do a class like that.

Rick: Okay.

Andrea: It may be pointing out where you might need to do something different for Genesis or Thesis, you know for both of them.

Rick: Sure.

Andrea: Which would be helpful. Anyway, thank you I’m getting more of your time.

Rick: Okay. You’re welcome have a good evening Andrea.

Andrea: You too, bye.

Rick: Bye. Trish asks, “How did I get the visual editor within the widget”. The visual editor was the Black Studio TinyMCE plugin.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment