Community Forums › Forums › Archived Forums › General Discussion › Is it possible to add markup to a section within a widget
Tagged: custom widget, filter widget
- This topic has 13 replies, 2 voices, and was last updated 7 years, 12 months ago by leighm.
-
AuthorPosts
-
April 1, 2016 at 8:56 am #182660leighmMember
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">
April 1, 2016 at 9:45 am #182664Brad DaltonParticipantYou 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?
April 1, 2016 at 10:07 am #182667leighmMemberHi 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.
April 1, 2016 at 10:24 am #182668Brad DaltonParticipantThere'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.
April 1, 2016 at 10:38 am #182669leighmMemberThanks 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.
April 1, 2016 at 11:04 am #182670Brad DaltonParticipantYou 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.
April 2, 2016 at 2:12 am #182708leighmMemberBrad, 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.
April 2, 2016 at 2:17 am #182710Brad DaltonParticipantI 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
April 2, 2016 at 2:51 am #182713leighmMemberThanks 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.
April 2, 2016 at 3:45 am #182714Brad DaltonParticipantLooks like you are using static images.
You could replace them with
genesis_get_custom_field('your-field');
April 2, 2016 at 3:57 am #182716leighmMemberHi 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?
April 2, 2016 at 4:03 am #182718Brad DaltonParticipantThats 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.
April 2, 2016 at 4:09 am #182719leighmMemberYes, 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.
April 2, 2016 at 6:51 am #182724leighmMemberOk, 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.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.