ヘッダー画像の幅をスマホの幅に合わせたい・・・

テーマがヘッダー画像で推奨しているサイズより大きい画像を用意すると、まずは良いところでしょう。
ただし、iPad、iPhoneでは一部だけが拡大されてしまうこともあります。

参考にされているページ先の説明では、カスタムヘッダーを背景画像としているからだと思います。
サイトタイトルとヘッダー画像を重ねて表示させる課題については、relativeで出来ました。

コードではなく、スタイルシートで出来ました。

わたしは『ヘッダー画像』、『サイトタイトルと説明』、『ナビゲーション』の順番に入れ替えているのでポジションrelativeで、パッディング値で調整しました。

「タイトル文とヘッダー画像を重ねて表示させたくて」という点で、タイトルのID,classに入れています。

position: relative;
 top: （任意）;
 left: （任意）;
 margin: （任意）;
 padding: （任意）;

ただし、「ヘッダー画像の幅をスマホの幅に合わせたい」のトピックからは離れるんじゃないですか。「ヘッダー画像のせいでスマホを縦画面で見ると画像が横に広がり過ぎてしまい、またスマホを横画面にするとヘッダー画像の右側が表示されなくなります。」ということで、ヘッダー画像自体を見直すのが良いでしょう。

堂々巡りですが、タイトル文とヘッダー画像を重ねて表示させたくて http://wpcos.com/?p=7224 を参考に作成されたのですから、しかし通常PCサイトで使用する「background-attachment:fix」は、そもそもmobile safariが対応していない。そこで「background-size:cover」は、ウインドウサイズに合わせて背景画像を伸縮してくれます。しかも、これ自体はmobile safariも対応しているのですが、「background-attachment:fix」と「background-size:cover」は、併用できません。その理由としては、ios7まではviewportの設定にminimal-uiがありました。しかし、ios8以降、minimal-uiがサポートされなくなりました。iphone6は画面が大きいから、ツールバー等を隠す必要がないという判断かもしれません。ざっくりそういうところはご存知でしょう。

ヘッダー画像で推奨している画像サイズで用意すれば一番ベストです。「ナビゲーションメニューの幅より若干短い」ことになるのは作成されたテーマの仕様ではないですか。
スマホ対応に縮尺変更した画像を、アドレスを間違ってませんか。メディアに画像を登録すると、たいてい４種類以上の画像ファイルが生成されると思います。それに、現在のテーマにする以前に使ったテーマで画像を登録している場合は、その時のサイズの画像が残っていて現在のテーマに合わないものです。

繰り返しますが、わたしはテーマのヘッダー画像で登録しただけ。ヘッダー画像の下にサイトタイトル、ナビゲーションが並ぶ配置にしただけなので、position: relative;を追加したスタイルシートで出来ました。