jQuery オブジェクトを掴んで拡大、縮小させる

今回はWordpressにjQuery-uiのcssを取り込むことに苦労しました。結局、jQueryのcdnからリンクさせることでうまくゆきました。
テーマエディタのhedder.phpに下記のコードを追加することでCSSを反映させることができました。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">


コードは以下の通りです。


<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
</script>
<div id="resizable" class="ui-widget-header">
<p class="ui-state-active">Resize</p>
</div>
<div id="also" class="ui-widget-content">
<p class="ui-widget-header">will also resize</p>
</div>
<script>
$( function() {
$( "#resizable" ).resizable({
alsoResize: "#also"
});
$( "#also" ).resizable();
} );
</script>