Can anyone please advise how best to develop this theme?

I think I need a CSS framework? (I’ve never used one, but am keen to learn. I can write HTML and CSS.)

I’ve thought of these 3 options:
1) Give up on the Foundation-Press-based custom theme and start again based on a current, supported theme.

2) Use Bootstrap to develop the old custom theme, as advised by the theme developer Ole Fredrik on Github.

3) Use Foundation to develop the old custom theme. But I wonder why this wasn’t advised by Ole Fredrik?

This is my first attempt at WP theming. I’ve set up a staging site.

Grateful for any advice.

I’m working on migrating an existing site to AMP. Firstly I’ve done a fair few of these and I’m loving how this plugin has progressed.

However on my latest site I have an issue with the menu when viewed on the desktop using the ?amp query in transitional mode.

The existing code uses foundation and it uses brettsmason Walker_Nav_Menu to create the unordered list used for the menu.

I use is_amp_request and isset($_GET[amp_get_slug()) to determine if the page is amp and if it is I manually add the accordian menu class. This works great on mobile versions of the page and the default non amp behaviour remains the same. When I view an AMP page on desktop however the class is still added (as obviously the page is amp and still has the ?amp query).

SO how can I now add an additional test in my if statement that can determine if the page is being viewed in dewsktop mode (width is over 768px) I would normally use some javascript to say put the width into a cookie but with the restictions on AMP this is not an option so ultimately what my question biols down to is does this amp plugin have a helper function or amp compaitible script that can feed the width into something i can test to determine if i manually add the accordian-menu class.

This is what i have in function that calls the Walker:

function joints_top_nav() {
    $menuClass = 'medium-horizontal menu';
    if (
        function_exists('amp_is_request') &&
        amp_is_request() &&
        isset( $_GET[ amp_get_slug() ] )
    ) {
        $menuClass .= ' accordion-menu';
    }
	return wp_nav_menu(array(
	    'echo'              => false,
		'container'			=> false,						// Remove nav container
		'menu_id'			=> 'main-nav',					// Adding custom nav id
		'menu_class'		=> $menuClass,	// Adding custom nav class
		'items_wrap'		=> '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown">%3$s</ul>',
		'theme_location'	=> 'main-nav',					// Where it's located in the theme
		'depth'				=> 5,							// Limit the depth of the nav
		'fallback_cb'		=> false,						// Fallback function (see below)
		'walker'			=> new Topbar_Menu_Walker()
	));
}

In my functions I have added a generic theme support function:

add_theme_support(
    'amp',
    array(
        'nav_menu_toggle' => array(
            'nav_container_id' => 'top-bar-menu', // The menu
            'nav_container_toggle_class' => 'show-menu',
            'menu_button_id' => 'responsive-menu-toggle', // The button
            'menu_button_toggle_class' => 'is-active',
        ),
        'paired' => true,
    )
);

If no such function exists with AMP is it something that would be considered for the future? And also what would you guys suggest for this kind of scenario? I realise I could double the code and have a desktop and a mobile menu but I’d sooner keep the original code as it is as much as I can in line with it’s original responsive functionality.

I also have the issue reported on here with submenu’s not working. In my case the items are not shown but I can live with that to a poont.

thanks

I have @font-face’d the following fonts in my style.css file like below. However, I am the only person who can see the proper fonts (here is a screenshot: https://erinstruble.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-09-at-13.16.36.png). Other people are getting the fallbacks. Someone at Go-Daddy said they saw this error “DevTools failed to parse SourceMap:?https://erinstruble.com/wp-content/themes/JointsWP-CSS-master/assets/styles/style.css.map”. How can I get these fonts to work properly for others?

@font-face {
    font-family: "StudioFeixenSans-Book" !important;
    src: url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.eot")!important;
    src: url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.eot") format("embedded-opentype"),
    url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.woff2") format("woff2"),
    url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.woff") format("woff"),
    url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.ttf") format("truetype")!important;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "StudioFeixenSerif-Regular"!important;
    src: url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.eot")!important;
    src: url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.eot") format("embedded-opentype"),
    url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.woff2") format("woff2"),
    url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.woff") format("woff"),
    url("https://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.ttf") format("truetype")!important;
    font-weight: normal;
    font-style: normal;
}

I would like to add attribut to the form element to get something like that :

<form data-abide novalidate ...
Is there any way to do it without using js ?

Esse plugin é fantástico, e até melhor que outros que comprei anteriormente.

We all are quite lucky to have this resource.