- This topic has 13 replies, 2 voices, and was last updated 6 years, 1 month ago by
.
-
Posts
-
When I add an element to a widget area e.g. Recent posts, it creates a <section> tag and all the markup goes in there. I know I can add markup before and after a widget area in the functions, but is there any way to access the markup within the sections tag so I can add a div inside it? The reason I want to get inside the section is so that I can add an image to the top of each section in a widget area, and I don't mean using featured images.
Here's the code for the section:
<section id="event_list_widget-3" class="widget widget_event_list_widget"><div class="widget-wrap"><h4 class="widget-title widgettitle">Upcoming events:</h4> <div class="event-list"> <ul class="event-list-view"> <li class="event smcu-yearl-events"> <div class="event-date"><div class="start-date"><div class="event-weekday">Fri</div><div class="event-day">27</div><div class="event-month">May</div><div class="event-year">2016</div></div></div> <div class="event-info single-day"><div class="event-title"><h3>The Golf Outing</h3></div><span class="event-time">9:00 am</span></div> </li> <li class="event smcu-yearl-events"> <div class="event-date"><div class="start-date"><div class="event-weekday">Thu</div><div class="event-day">16</div><div class="event-month">Jun</div><div class="event-year">2016</div></div></div> <div class="event-info single-day"><div class="event-title"><h3>The Annual Lunch</h3></div><span class="event-time">8:00 pm</span></div> </li></ul> </div></div></section>I want to add a div between here: <section id="event_list_widget-3" class="widget widget_event_list_widget"> and here: <div class="widget-wrap">
You can do that if the widget includes a filter
or
Copy the widget code and create your own custom widget in your child theme.
Is this widget generated by a plugin?
Hi Brad, there 3 widgets (in 1 column). One is a plugin: Event List. The other2 are recent posts and featured page. I want to add an image to the top of each.
How do I know if a widget includes a filter? And how would I go about altering that way?
Could you direct me to any tutorials or snippets that discuss creating a custom widget?
Thanks.
There's a lot of work to filter or create 3 custom widgets.
Here's a guide to create a custom genesis featured posts widget however i would use a different solution.
You could use custom fields or the featured image.
Is the image attached to a specific post or is it a random image?
Link to the page in question please.
Thanks for the link Brad.
It's a random image for the event widget. For the recent posts, potentially I'd image I could use one of the featured images but that would mean we'd need to ensure that every post gets a featured image, which I can't guarantee. The last widget is a featured page, and it will always remain the same so a featured image would work in this case.
You could code it so it looks for a image added via custom field first otherwise it gets the featured image ( if added ) otherwise it pulls a fallback from your images folder.
For the filters, you can search in the code for the widget for filter.
Brad, I did a search for creating custom fields and found your tutorial here: http://wpsites.net/web-design/how-to-create-a-custom-field/. It's a very good tutorial, but I'm unsure how I could use this in my situation. The content I'm trying to add to is contained within widgets, and one of them is a plugin widget. How can I inject markup into such specific areas of the page?
Can you explain further what you mean about filters? I'm not following that part at all.
Unfortunately, I'm working locally on this site, so I can't share it with you right now, but here's the code for the 3 widgets in question.
Widget 1: Event List
<section id="event_list_widget-3" class="widget widget_event_list_widget"><div class="widget-wrap"><h4 class="widget-title widgettitle">Upcoming events:</h4> <div class="event-list"> <ul class="event-list-view"> <li class="event smcu-yearl-events"> <div class="event-date"><div class="start-date"><div class="event-weekday">Fri</div><div class="event-day">27</div><div class="event-month">May</div><div class="event-year">2016</div></div></div> <div class="event-info single-day"><div class="event-title"><h3>The Golf Outing</h3></div><span class="event-time">9:00 am</span></div> </li> <li class="event smcu-yearl-events"> <div class="event-date"><div class="start-date"><div class="event-weekday">Thu</div><div class="event-day">16</div><div class="event-month">Jun</div><div class="event-year">2016</div></div></div> <div class="event-info single-day"><div class="event-title"><h3>The Annual Lunch</h3></div><span class="event-time">8:00 pm</span></div> </li></ul> </div></div></section>And I want to be able to add a div just inside the the opening section tag like this:
<section id="event_list_widget-3" class="widget widget_event_list_widget"><div class="home-main-feature-col1 widget-area"><img src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg" class="home-main-feature-col" /></div><div class="widget-wrap"><h4 class="widget-title widgettitle">Upcoming events:</h4> <div class="event-list"> <ul class="event-list-view"> <li class="event smcu-yearl-events"> <div class="event-date"><div class="start-date"><div class="event-weekday">Fri</div><div class="event-day">27</div><div class="event-month">May</div><div class="event-year">2016</div></div></div> <div class="event-info single-day"><div class="event-title"><h3>The Golf Outing</h3></div><span class="event-time">9:00 am</span></div> </li> <li class="event smcu-yearl-events"> <div class="event-date"><div class="start-date"><div class="event-weekday">Thu</div><div class="event-day">16</div><div class="event-month">Jun</div><div class="event-year">2016</div></div></div> <div class="event-info single-day"><div class="event-title"><h3>The Annual Lunch</h3></div><span class="event-time">8:00 pm</span></div> </li></ul> </div></div></div></section>Widget 2: Recent posts
<section id="recent-posts-4" class="widget widget_recent_entries"><div class="widget-wrap"> <h4 class="widget-title widgettitle">Posts</h4> <ul> <li> <a href="http://localhost/smcu/the-annul-lunch/">The Annul Lunch</a> </li> <li> <a href="http://localhost/smcu/the-golf-outing/">The Golf Outing</a> </li> <li> <a href="http://localhost/smcu/annual-dinner/">Annual Dinner</a> </li> <li> <a href="http://localhost/smcu/hello-world/">Hello world!</a> </li> <li> <a href="http://localhost/smcu/threaded-comments/">Sample Post With Threaded Comments</a> </li> </ul> </div></section>Again, I want to put a div after the opening section tag like this:
<section id="recent-posts-4" class="widget widget_recent_entries"><div class="home-main-feature-col2 widget-area"><img src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg" class="home-main-feature-col" /></div><div class="widget-wrap"> <h4 class="widget-title widgettitle">Posts</h4> <ul> <li> <a href="http://localhost/smcu/the-annul-lunch/">The Annul Lunch</a> </li> <li> <a href="http://localhost/smcu/the-golf-outing/">The Golf Outing</a> </li> <li> <a href="http://localhost/smcu/annual-dinner/">Annual Dinner</a> </li> <li> <a href="http://localhost/smcu/hello-world/">Hello world!</a> </li> <li> <a href="http://localhost/smcu/threaded-comments/">Sample Post With Threaded Comments</a> </li> </ul> </div></section>Widget 3: Featured Page: I know I can use the featured image in the widget settings but just wanted to show that I'm trying to achieve the same thing here.
<section id="featured-page-4" class="widget featured-content featuredpage"><div class="widget-wrap"><article class="post-456 page type-page status-publish has-post-thumbnail entry"><a href="http://localhost/smcu/development/" class="alignnone" aria-hidden="true"><img src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test.jpg" class="entry-image attachment-page" alt="Development" itemprop="image" srcset="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg 150w, http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test.jpg 300w" sizes="(max-width: 300px) 100vw, 300px" height="300" width="300" /></a><header class="entry-header"><h2 class="entry-title"><a href="http://localhost/smcu/development/">Development</a></h2></header><div class="entry-content"><p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages as you like and manage all of your content inside of WordPress. This is</p></div></article></div></section>The same again:
<section id="featured-page-4" class="widget featured-content featuredpage"><div class="home-main-feature-col3 widget-area"><img src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg" class="home-main-feature-col" /></div><div class="widget-wrap"><article class="post-456 page type-page status-publish has-post-thumbnail entry"><a href="http://localhost/smcu/development/" class="alignnone" aria-hidden="true"><img src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test.jpg" class="entry-image attachment-page" alt="Development" itemprop="image" srcset="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg 150w, http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test.jpg 300w" sizes="(max-width: 300px) 100vw, 300px" height="300" width="300" /></a><header class="entry-header"><h2 class="entry-title"><a href="http://localhost/smcu/development/">Development</a></h2></header><div class="entry-content"><p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages as you like and manage all of your content inside of WordPress. This is</p></div></article></div></section>Thanks Brad.
I wouldn't do it that way because its a lot of work and very complicated plus the output would be fairly messy and require lots of CSS..
Is it o.k to add the images before the widget?
Another option is to use an existing class from each widget and use
::before
http://www.w3schools.com/cssref/sel_before.asp
Thanks Brad. I just tried the the pseudo element but it won't allow me to add mark up. Just plain text.
In the Enterprise Pro, it has a bottom area that you put 3 widgets in to make up three columns. If I add the first image before the first widget, it just pushes the columns onto a new row, which I don't want. I actually went and built another 3 widget areas, so I could put each widget into one of the new widget areas, and then in the front-page.php where I declare the genesis widget area for each new widget, I added a div just after my opening div. This does allow me to add the image pretty much where I need it. The problem arises because these are circular images (using border radius) and then using absolute positioning so I can float the image above the widget and make sure it stays in the center of the widget as the viewport changes.
I thought it would work, but when I set the image to absolute position 50%, it centers itself in the middle of the 3 widgets not the specific widget that I want it to. Here's the functions:
function enterprise_home_main_feature_col1_widget() { genesis_widget_area( 'home-main-feature-col1', array( 'before' => '<div class="wrap"><div class="home-main-feature-col1 widget-area"><img src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg" class="home-main-feature-col">', 'after' => '</div>', ) ); } function enterprise_home_main_feature_col2_widget() { genesis_widget_area( 'home-main-feature-col2', array( 'before' => '<div class="home-main-feature-col2 widget-area"><div class="home-main-feature-col2 widget-area"><img src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg" class="home-main-feature-col">', 'after' => '</div></div>', ) ); } function enterprise_home_main_feature_col3_widget() { genesis_widget_area( 'home-main-feature-col3', array( 'before' => '<div class="home-main-feature-col3 widget-area"><div class="home-main-feature-col3 widget-area"><img src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg" class="home-main-feature-col">', 'after' => '</div></div></div>', ) ); }And some of the css:
.home-main-feature-col1, .home-main-feature-col2, .home-main-feature-col3 { position: relative; } .home-main-feature-col { border-radius: 50%; max-width: 140px; position: absolute; margin-left: -70px; top: -129px; left: 50%; border: 10px solid rgb(42, 191, 212); }I'd send you a screen shot of the design but I don't see anywhere to attach images here.
Thanks Brad.
Looks like you are using static images.
You could replace them with
genesis_get_custom_field('your-field');
Hi Brad, I'm not sure I'm following you. Can you give me a little more detail?
But regardless of whether the images are static or dynamic, I still need to add the markup in a specific position. Is it going to be possible to get markup inside the section tag?
Thats the problem, its possible but its a heap of work because you need to filter each widget or create a custom version of each widget..
You can add it to the widget areas
or
Or use custom fields if you need unique images for each post other than the featured image. The only problem is, they will display outisde your widget but within your widget areas.
Someone else may have another method.
Yes, and that is exactly the problem I have: when I absolutely position the images, they all line up together in the center of the page. Hense, the need to put the code inside the section, but by the sounds of it, this is pretty complex coding, and most likely beyond me at this stage.
I really like Genesis but it can feel quite restrictive at times!
Thanks anyway for all you help, Brad.
Ok, I was able to do it! So, as I mentioned above I needed to separate each widget into it's own widget area. Before, all 3 widgets were slotted in one after the other and these made up the 3 columns. By creating 3 widget areas, I was able to then add an image widget (using the Image Widget plugin to make it more flexible for the client) to each widget area, and with some css I was able to absolutely position those images relative to the image widget container which happens to be the same width as the widgets below them, so the images are now remaining at the center top of each widget.
- The forum ‘General Discussion’ is closed to new topics and replies.