Title: Javascript help customizing Portfolio Grid
Last modified: August 14, 2020

---

# Javascript help customizing Portfolio Grid

 *  [lgehrig4](https://wordpress.org/support/users/lgehrig4/)
 * (@lgehrig4)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/javascript-help-customizing-portfolio-grid/)
 * I would like to add an abbreviated description that you would see if you click
   on one of the portfolio tiles. This JS will add the element and new HTML but 
   now I need to pull the description over to insert it.
 *     ```
       window.addEventListener('load', () => {
           let target = document.querySelector('.entry-title')
           let newElem = document.createElement('p');
           let excerpt = 'This will be the excerpt...'
   
           newElem.innerHTML = excerpt
   
           target.parentNode.insertBefore(newElem, target.nextSibling);
         })
       ```
   
 * Now I just need to find the short code for the description and replace the hardcoded‘
   excerpt’ value with that. How do I find this code?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fjavascript-help-customizing-portfolio-grid%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/javascript-help-customizing-portfolio-grid/#post-13258595)
 * If you don’t know the shortcode itself, try var_dumping (in PHP) global $shortcode_tags.
   Shortcodes are PHP based. Shortcodes can be executed with `do_shortcode()`. You
   can pass the returned value via `wp_localize_script()` to JavaScript. In JS you
   can then assign the passed content to an HTML container.
 *  Thread Starter [lgehrig4](https://wordpress.org/support/users/lgehrig4/)
 * (@lgehrig4)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/javascript-help-customizing-portfolio-grid/#post-13312603)
 * [@bcworkz](https://wordpress.org/support/users/bcworkz/)
 * I’m circling back to this. Been trying the API route but I’ve run into many roadblocks.
 * I’ll read up on shortcode functions as mentioned above but my question now is
   more about where to execute these. The admin created a child theme that has a
   functions.php file. Can I use that for this short code or do I have to make these
   updates directly in the functions.php file in stored in the theme folder for 
   the site?
 * My plan, if I’m understanding this correctly, is to generate the short code in
   the child theme’s functions.php and then pass the return value to JS that will
   be written in the block editor’s advanced section of the page this return information
   will be displayed.
 * Does this make any sense or am I looking at this all wrong?
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/javascript-help-customizing-portfolio-grid/#post-13317790)
 * A child theme’s functions.php is usually OK. However, for organizational reasons
   alone, it could make more sense to place your code in a custom, site specific
   plugin. Additionally, some child themes are actually commercial themes based 
   on a common framework theme. If it’s one of those, as opposed to a bespoke child
   theme, you are maybe better off using a plugin.
 * That said, the principal reason for child theme or site specific plugin is to
   avoid having your code wiped out during an update. If there is no chance of something
   being updated by file replacement, there is little reason to not add you code;
   other than it could be organizationally messy.
 * I’m not following what your intended plan actually entails. The default advanced
   section for blocks does not have a field that’s appropriate for writing normal
   content, they are for element attributes like class or id. There’s a dedicated
   block for shortcodes, but I’m not clear why you’d be creating your own shortcode.
   To insert inline JS? That’s reasonable for short bits of code, but for more extensive
   JS you probably should enqueue it as an external file. By enqueuing, you can 
   then pass data to JS through `wp_localize_script()`
 * This still hasn’t answered where the data is coming from. You seemed to indicate
   in your OP that it comes from a shortcode. You could have your PHP code get that
   shortcode’s returned value and pass it to your JS. Ideally IMO, the content you
   want to display on click would be part of the tile’s output, but hidden from 
   view. Then you script only needs to make it visible, then hidden again on dismissal
   or clicking something else. But if it’s difficult to influence tile output, maybe
   it’s not meant to be.
 * If the content you need comes from a shortcode, where does the shortcode handler
   get the data? It may be better to go directly to the source instead of going 
   through the shortcode.
 *  Thread Starter [lgehrig4](https://wordpress.org/support/users/lgehrig4/)
 * (@lgehrig4)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/javascript-help-customizing-portfolio-grid/#post-13319570)
 * [@bcworkz](https://wordpress.org/support/users/bcworkz/)
 * I located the plugin file that generates the cards for that page and I copied
   it to the child theme. Now I just need to figure out how to override the plugin’s
   template with mine. I think this commented out section is the info that I am 
   looking for. If that’s the case perfect!
 *     ```
       <?php
           global $post, $more, $aux_content_width;
           $more = 0; // to enable read more tag
   
           // the image width is 63% of wrapper
           $media_width = $aux_content_width * 0.63;
           $image_aspect_ratio = 0.65;
   
           $post_vars   = auxpfo_get_portfolio_config( $post, array(
               'request_from'       => 'archive',
               'media_width'        => $media_width,
               'media_size'         => 'large',
               'upscale_image'      => true,
               'crop'               => true,
               'add_image_hw'       => true,
               'image_sizes'        => array(
                   array( 'min' => '', 'max' => '1024px', 'width' => '100vw' ),
                   array( 'min' => '', 'max' => '',       'width' => $media_width.'px' )
               ),
               'srcset_sizes'  => array(
                   array( 'width' =>     $media_width, 'height' =>     $media_width * $image_aspect_ratio ),
                   array( 'width' => 2 * $media_width, 'height' => 2 * $media_width * $image_aspect_ratio ),
                   array( 'width' => 4 * $media_width, 'height' => 4 * $media_width * $image_aspect_ratio )
               )
            ) );
           extract( $post_vars );
   
           // Add class name for custom styles
           $land_item_class_name = auxin_get_option( 'show_portfolio_land_side_entry_box_colors' ) ? ' aux-item-land' : '';
   
       ?>
                               <article <?php post_class( 'aux-single-portfolio-wrapper aux-portfolio-land' . $land_item_class_name ); ?> >
                                   <?php if ( $has_attach ) { ?>
                                   <div class="entry-media">
                                       <?php echo $the_media; ?>
                                   </div>
                                   <?php
                                      }else { ?>
                                           <div class="entry-media">
                                               <div class="aux-media-frame aux-media-image">
                                                   <a href="<?php echo !empty( $the_link ) ? $the_link : get_permalink(); ?>">
                                                       <img src="<?php  echo AUXIN_URL . 'images/welcome/image-frame.svg'; ?>" class="auxin-attachment auxin-featured-image attachment-1024x1024" alt="portfolio default image" >
                                                   </a>
                                               </div>
                                           </div>
                                   <?php   }
                                   ?>
                                   <div class="aux-land-side">
                                       <div class="entry-main">
   
                                           <header class="entry-header">
                                               <h3 class="entry-title">
                                                   <a href="<?php echo !empty( $the_link ) ? $the_link : get_permalink(); ?>">
                                                       <?php echo !empty( $the_name ) ? $the_name : get_the_title(); ?>
                                                   </a>
                                               </h3>
                                           </header>
   
                                            <div class="entry-content">
                                               <?php
   
                                                  // $content_listing_type   = is_category() || is_tag() ? auxin_get_option( 'post_taxonomy_archive_content_on_listing' ) : auxin_get_option( 'blog_content_on_listing' );
                                                 //  $content_listing_length = is_category() || is_tag() ? auxin_get_option( 'post_taxonomy_archive_on_listing_length', 255 ) : auxin_get_option( 'excerpt_len', 255 );
   
                                                   // get overview context
                                                   $_overview = auxin_get_post_meta( $post, '_overview' );
   
                                                   if( has_excerpt() ) {
                                                       the_excerpt();
                                                   } elseif( ! empty( $_overview )  ){
                                                       auxin_the_trimmed_string( auxin_strip_shortcodes( auxin_extract_text( $_overview ) ), 170 );
                                                   }
   
                                               ?>
                                           </div>
                                       </div>
   
                                       <footer class="entry-meta">
                                           <div class="portfolio-tax">
                                               <span class="entry-tax">
                                               <?php // the_category(' '); we can use this template tag, but customizable way is needed! ?>
                                               <?php $tax_name = 'portfolio-cat';
                                                     $cat_terms = wp_get_post_terms( $post->ID, $tax_name );
                                                     if( $cat_terms = wp_get_post_terms( $post->ID, $tax_name ) ){
                                                         foreach( $cat_terms as $term ){
                                                             echo '<a href="'. get_term_link( $term->slug, $tax_name ) .'" title="'.__("View all posts in ", 'auxin-portfolio'). $term->name .'" rel="category" >'. $term->name .'</a>';
                                                         }
                                                     }
                                               ?>
                                               </span>
                                               <?php if( ! empty($cat_terms) ){
                                                   edit_post_link(__("Edit", 'auxin-portfolio'), '<i> | </i>', '');
                                                   } else {
                                                       edit_post_link(__("Edit", 'auxin-portfolio'), '', '');
                                                   }
                                               ?>
                                           </div>
                                           <?php
                                           if( function_exists('wp_ulike') && auxin_get_option( 'show_portfolio_archive_like_button' ) ) { ?>
                                               <div class="comments-iconic">
                                                   <?php
                                                       wp_ulike( 'get', array( 'style' => 'wpulike-heart', 'button_type' => 'image', 'wrapper_class' => 'aux-wpulike aux-wpulike-portfolio-widget' ) );
                                                   ?>
                                               </div>
                                           <?php  } ?>
   
                                       </footer>
   
                                   </div>
   
                               </article>
       ```
   
 * I think this link has the info I need to override the plugin template, but it’s
   a bit above my head currently. Seems to be exactly what I’m looking to accomplish
   though.
 * [https://deliciousbrains.com/wordpress-plugin-development-template-files/](https://deliciousbrains.com/wordpress-plugin-development-template-files/)
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/javascript-help-customizing-portfolio-grid/#post-13323557)
 * I don’t know what auxin_*() functions do, but it does look promising. Try it!
   🙂
 * It looks like if you put the desired tile text in the dedicated excerpt field
   that it’ll be displayed somehow, without changing a thing.
 * I don’t know how the content will appear, it could be static text below the image,
   so there could be more to do to get on click behavior. But having content already
   there to work with gets you over a major hurdle. Nice work sleuthing out the 
   related code!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Javascript help customizing Portfolio Grid’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [Short Code](https://wordpress.org/support/topic-tag/short-code/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 5 replies
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [5 years, 9 months ago](https://wordpress.org/support/topic/javascript-help-customizing-portfolio-grid/#post-13323557)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics