diff --git a/modules/wowchemy/layouts/partials/widgets/portfolio.html b/modules/wowchemy/layouts/partials/widgets/portfolio.html
index 6d0384fd..66d56e88 100644
--- a/modules/wowchemy/layouts/partials/widgets/portfolio.html
+++ b/modules/wowchemy/layouts/partials/widgets/portfolio.html
@@ -18,13 +18,20 @@
     {{ $filter_default := default (int $st.Params.content.filter_default) 0 }}
 
     {{/* Parse default filter tag from front matter in the form of either tag name or CSS class name. */}}
-    {{ $default_filter_tag_raw := (index $st.Params.content.filter_button ($filter_default)).tag }}
-    {{ $default_filter_tag := printf ".js-id-%s" (replace $default_filter_tag_raw " " "-") }}
-    {{ if or (eq (substr $default_filter_tag_raw 0 1) "*") (eq (substr $default_filter_tag_raw 0 1) ".") }}
-      {{ $default_filter_tag = $default_filter_tag_raw }}
-    {{ end }}
+    {{ $default_filter_item := (index $st.Params.content.filter_button ($filter_default)) }}
+    {{ $default_data_filter := "" }}
+    {{ with $default_filter_item.filter }}
+      {{ $default_data_filter = . }}
+    {{ else }}
+      {{ $default_filter_tag := $default_filter_item.tag }}
+      {{ if or (eq (substr $default_filter_tag 0 1) "*") (eq (substr $default_filter_tag 0 1) ".") }}
+        {{ $default_data_filter = $default_filter_tag }}
+      {{ else }}
+        {{ $default_data_filter = printf ".js-id-%s" (lower (replace $default_filter_tag " " "-")) }}
+      {{ end }}
+    {{end}}
 
-    <span class="d-none default-project-filter">{{ $default_filter_tag }}</span>
+    <span class="d-none default-project-filter">{{ $default_data_filter }}</span>
 
     {{/* Only show filter buttons if there are multiple filters. */}}
     {{ if gt (len $st.Params.content.filter_button) 1 }}
@@ -34,9 +41,15 @@
           <div class="btn-group flex-wrap">
             {{ range $idx, $item := $st.Params.content.filter_button }}
               {{/* Parse filter tag from front matter in the form of either tag name or CSS class name. */}}
-              {{ $data_filter := printf ".js-id-%s" (replace .tag " " "-") }}
-              {{ if or (eq (substr .tag 0 1) "*") (eq (substr .tag 0 1) ".") }}
-                {{ $data_filter = .tag }}
+              {{ $data_filter := "" }}
+              {{ with .filter }}
+                {{ $data_filter = . }}
+              {{ else }}
+                {{ if or (eq (substr .tag 0 1) "*") (eq (substr .tag 0 1) ".") }}
+                  {{ $data_filter = .tag }}
+                {{ else }}
+                  {{ $data_filter = printf ".js-id-%s" (lower (replace .tag " " "-")) }}
+                {{ end }}
               {{ end }}
               <a href="#" data-filter="{{ $data_filter | safeHTMLAttr }}" class="btn btn-primary btn-lg{{ if eq $idx $filter_default }} active{{ end }}">{{ .name }}</a>
             {{ end }}
@@ -77,7 +90,7 @@
     {{ $query = sort $query $sort_by $sort_order }}
 
     {{ range $index, $item := $query }}
-      {{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
+      {{ $js_tag_classes := delimit (apply (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") "lower" ".") " " }}
         {{ if in (slice "masonry" 3) $view }}
           <div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
         {{else}}